Function works but won't return HTML?

Question

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?

You're returning in your `.map()` callback, not your `renderFolderStructure()`. You should return the array `.map()` gives you: `return assetFolders.map(...)` — Nick Parsons, Jan 07 '22 at 12:03

score 1 · Answer 1 · answered Jan 07 '22 at 12:06

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

Function works but won't return HTML?

1 Answers1