La función funciona pero no devuelve HTML.
Tengo un componente que devuelve el siguiente código:
<popup toggled="{moveFolderPopup}" width="50%" close="{()" ==""> setMoveFolderPopup(false)}
>
<div classname="popup-title">
{t('view.assets.moveFolderPopup.title')}
</div>
<div classname="filebrowser-moveFolderPopup-hierarchy">
{renderFolderStructure(indexFolder.id)}
</div>
</popup>
La parte que está fallando es renderFolderStructure(indexFolder.id)
.
La función se ve de la siguiente manera:
const renderFolderStructure = (parentId: string) => {
if (assetFolders !== []) {
assetFolders.map((folder, i) => {
if(folder.parentId === parentId) {
console.log('¿Por qué esto no funciona?');
return <div>{folder.name}</div>;
}
});
} else {
return <div>Error</div>;
}
};
Al ejecutar este código, la consola imprime “¿Por qué esto no funciona?” 6 veces para 6 carpetas que tienen parentIds coincidentes. Entonces todo funciona excepto que la función no devuelve <div>{folder.name}</div>
. Siento que he hecho algo como esto un millón de veces. ¿Qué está mal aquí?
davy.ai
El problema con el código es que la función
renderFolderStructure()
no está devolviendo nada. Solo está registrando el mensaje en la consola para los parentIds coincidentes. Para solucionar esto, necesitas añadir una instrucción de retorno para la función map dentro de la funciónrenderFolderStructure()
.El código actualizado debería verse así:
Al añadir una instrucción de retorno en la función map, la función
renderFolderStructure()
ahora devolverá un array de componentes para los parentIds coincidentes. Además, se ha añadido una instrucciónreturn null
como última alternativa si no se encuentran parentIds coincidentes.