0

I am using the .map() function in the exact same way as in other projects, but on the one I am currently working on, it's throwing me this error: Error: Objects are not valid as a React child (found: object with keys {id, title}). If you meant to render a collection of children, use an array instead. This is my code (the structure of which has worked in other projects as I mentioned):

import React from "react";
import Carousel from "react-elastic-carousel";

const Slider = () => {

  let items = [
    {id: 1, title: 'item #1'},
    {id: 2, title: 'item #2'},
    {id: 3, title: 'item #3'}
]

  return (
    <div>
      <div>
        <Carousel>
          {items.map((item) => (
            <div key={item}>{item}</div>
          ))}
        </Carousel>
      </div>
    </div>
  );
}

export default Slider;

I am wondering if it has to do with the fact that I am mapping inside of a component imported from an external library.

I have also tried adding an index to .map(item, index) and that didn't work either.

Carolina Klein
  • 81
  • 1
  • 2
  • 10
  • 1
    It has to do with the fact that you're trying to render an object (item is an object). I doubt that it would have worked in other projects. – jperl Apr 28 '21 at 14:52
  • Try searching for the error, Objects are not valid React nodes (see docs), you sure ment something like: `
    {item.title}
    `     – Dennis Vash Apr 28 '21 at 14:54

1 Answers1

0

Because item is an object. You need to update like this:

<div key={item.id}>{item.title}</div>
Viet
  • 12,133
  • 2
  • 15
  • 21