title: 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
body: <p>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 .</p>
  
  <pre><code>import React from 'react' ; 
  import Card from './Card.js';
  const CardList = ({Friends}) =&gt;{
      const Cardcomponent = Friends.map((user , i) =&gt; {
          return(
              &lt;div&gt;
                   &lt;Card id={Friends[i].id} name={Friends[i].name} username={Friends[i].username} instagram={Friends[i].instagram}  /&gt;
              &lt;/div&gt;
                )
      })
  return(
            &lt;div&gt;
                  {Cardcomponent}
            &lt;/div&gt;
        )
  } 
  export default CardList ;
  </code></pre>
  
  <p>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.</p>