3

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?

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Exitl0l
  • 459
  • 2
  • 11
  • 27
  • 1
    You are using `.map()` and `.forEach` incorrectly. With `.map()`, you expect to get something back from it, while with `.forEach()`, you expect to do something in it. – kit Nov 11 '18 at 15:39
  • 1
    What do you think that the return value of AlbumList function is? There's no return statement in the scope of the AlbumList function. forEach callback functions don't need to return anything. – Håken Lid Nov 11 '18 at 15:43
  • 1
    Duplicate of [JavaScript: Difference between .forEach() and .map()](/q/34426458/4642212) and [What does `return` keyword mean inside `forEach` function?](/q/34653612/4642212). This isn’t really related to React. – Sebastian Simon Jan 28 '23 at 09:33

1 Answers1

2

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

Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
omri_saadon
  • 10,193
  • 7
  • 33
  • 58