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 falla es renderFolderStructure(indexFolder.id) La función tiene el siguiente aspecto:
const renderFolderStructure = (parentId: string) => { if (assetFolders !== []) { assetFolders.map((folder, i) => { if(folder.parentId === parentId) { console.log('why wont this work?'); return <div>{folder.name}</div>; } }); } else { return <div>Error</div>; } }; Al ejecutar este código, la consola muestra "¿Por qué no funciona esto?" 6 veces para 6 carpetas que tienen parentId coincidentes. Entonces todo funciona excepto que la función no devolverá <div>{folder.name}</div> . Siento que he hecho algo así un millón de veces. ¿Qué pasa aquí?
Solo agrega return a tu función:
... if (assetFolders !== []) { return assetFolders.map((folder, i) => { ... } } else { ... Tienes que devolver el resultado de tu bucle de mapa. Si llama a return dentro del bucle del mapa, solo "escribirá" este resultado en la matriz. Lea más sobre el mapa: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map