ReactJS - Nothing was returned from render

Question

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I Have an issue related to this message. This is my component that causes the error:

import React from 'react';
import Thumbnail from './Thumbnail';

const AlbumList = ({ results }) => {
  let collections = [];
  let albums = { };

Object.values(results).map((item, i) => {
  if(!collections.includes(item.collectionId)) {
    collections.push(item.collectionId);
    albums[i] = {id: item.collectionId, cover: item.artworkUrl100}
  }
return albums;
});

Object.values(albums).forEach(element => {
 return (
  <Thumbnail source={element.cover} />
  )
 })
}

export default AlbumList;

Thumbnail is just a basic Component like:

import React from 'react';

const Thumbnail = ({source}) =>  {
  return(
    <div>
      <img src={source} alt="album cover"/>
    </div>
 )
}

export default Thumbnail;

I've been looking for the error like an hour or so. What am I missing?

Answer 1

Notice that map returns a list while forEach returns undefined.

You don't return anything from your functional Component Plus forEach does not return anything, instead change it to map.

Also you need to set the unique key to Thumbnail component in loop

return Object.values(albums).map((element, index) => {
 return (
  <Thumbnail key={"Key-"+index} source={element.cover} />
  )
 })

I would suggest to read this article map vs. forEach