I have a component that returns the following code:
<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>
The part that's failing is renderFolderStructure(indexFolder.id)
The function looks as follows:
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>;
}
};
Running this code the console prints out "Why wont this work?" 6 times for 6 folders that have matching parentIds. So everything works except that the function won't return <div>{folder.name}</div>. I feel like I have done something like this a million times. What's wrong here?
Just add return to your function:
...
if (assetFolders !== []) {
return assetFolders.map((folder, i) => { ... }
} else {
...
You have to return the result of your map loop. If you call return inside of the map loop you will only "write" this result into the array. Read more about map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map