Estoy haciendo que las traducciones sean dinámicas, pero tengo problemas en la parte en la que tengo que mostrar el objeto correspondiente de la otra matriz.
Tengo dos matrices, que tienen el mismo modelo, y lo que intento hacer es, cuando busco una traducción, quiero mostrar también la traducción correspondiente del otro idioma.
Por el momento, solo puedo mostrar el que estás buscando.
Por ejemplo: Si busco la frase ¿Estás seguro? , además del ¿Estás seguro? oración, debe mostrar también la oración correspondiente del otro idioma de columna.
Aquí hay un fragmento con un ejemplo: https://codesandbox.io/s/polished-smoke-n6w6i?file=/src/App.js
Cualquier ayuda será muy apreciada. ¡Gracias de antemano!
La lógica es filtrar los elementos de idioma seleccionados por su id , no por su valor . La id se toma de los elementos de idioma predeterminados.
Así es como
const searchByresourceId = (targetLng, selectedResources) => { // get the default language item id const ids = selectedResources.map(({languageResources}) => languageResources.map(({id}) => id)).flat(); return targetLng ?.map((item) => { const languageResources = item.languageResources.filter( (namespace) => ids.includes(namespace.id) ); return { ...item, languageResources }; }) .filter((item) => item.languageResources.length > 0); }Y deberías cambiar la forma en que configuras el estado.
const searchByresourceId = (targetLng, selectedResources) => { const ids = selectedResources.map(({languageResources}) => languageResources.map(({id}) => id)).flat(); return targetLng ?.map((item) => { const languageResources = item.languageResources.filter( (namespace) => ids.includes(namespace.id) ); return { ...item, languageResources }; }) .filter((item) => item.languageResources.length > 0); }https://codesandbox.io/s/cranky-ellis-ccdhx?file=/src/App.js
El código no está optimizado, por supuesto, solo demostré la lógica.