Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead

Question

i am new to react , it would be great if someone can explain the problem , this question has been answered but i am still confused .

import React from 'react' ; 
import Card from './Card.js';
const CardList = ({Friends}) =>{
    const Cardcomponent = Friends.map((user , i) => {
        return(
            <div>
                 <Card id={Friends[i].id} name={Friends[i].name} username={Friends[i].username} instagram={Friends[i].instagram}  />
            </div>
              )
    })
return(
          <div>
                {Cardcomponent}
          </div>
      )
} 
export default CardList ;

Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

Answer 1

The Problem was solved going back all the way to props that were used by function in another file when I added {} to properties in my Card.js file (some other file)

   const Card = ( id , email , name ) => { return( ...
                                             ....);
      to 
   const Card = ( {id , email , name} ) => { return( ...
                                                     ...);

This answer helped me to figure out the Solution https://stackoverflow.com/a/33577681/11556916

Answer 2

Cardcomponent is a list of components. So to display them, as the error message is telling you, you have to loop over them using map

{Cardcomponent.map((component, index) => {
  return (
    <div key={index}>
      {component}
    </div>
  )
}

Answer 3

You are not thinking about react correctly.

The friends data comes from some external source. You are going to consume it in your components.

You have 2 main components here.

• Card: Displays data about a single user
• CardList: Displays Card components

Each of your components needs different data to work properly. When you give the array of friends to CardList you just want it to render one Card component for each friend element in the list.

React takes care of all of the DOM manipulations behind the scenes so it needs to be sure that every element on the screen can be uniquely identified. This is why we sometimes need to help it by telling it what key to use for a component when we know that there could be a lot of them.

The Card component only needs information about 1 friend, so that's all we give it from the CardList.

Notice that Card is not defined inside CardList and that CardList is not defined in App. This allows us to reuse these components in other places if we want to.

There's a lot more to be said about this, but hopefully this helps a little.

Here is a sample app:

import React from "react";
import ReactDOM from "react-dom";

const Card = ({ friend, id, name, username, instagram }) => (
  <div>
    <ul>
      <li>id: {id}</li>
      <li>name: {name}</li>
      <li>username: {username}</li>
      <li>instagram: {instagram}</li>
    </ul>
  </div>
);

const CardList = ({ friends }) => (
  <div>
    {friends.map(friend => <Card key={friend.id} {...friend} />)}
  </div>
);

function App() {
  const friends = [
    { id: 1, name: "John Smith", username: "jsmith", instagram: "N/A" },
    { id: 2, name: "Mary Jane", username: "mjane", instagram: "puppyLover" },
    {
      id: 3,
      name: "Harry Potter",
      username: "hpotter",
      instagram: "best_wizard"
    }
  ];
  return (
    <div className="App">
      <CardList friends={friends} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);