title: Iterate through array and render
body: <p>I have a simple component Movies.jsx and array of objects inside movieList.jsx I am exporting this array and setting the state inside Movies.jsx equal to that array. When I look in the console i see that it got passed to the state ok. </p>
  
  <p>I wanna iterate through that array of object and render it: How do I do that?
  Whatever I try i get an error "Objects are not valid as a React child"</p>
  
  <p>Before I turned it into array it was a json object but I didn't have look with that either.</p>
  
  <p>I am also getting an error that "Each child in an array or iterator should have a unique 'key' prop"</p>
  
  <p><a href="https://i.stack.imgur.com/R10LA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R10LA.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/HIQD9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HIQD9.png" alt="enter image description here"></a></p>
  
  <p>Example 2:
  How would it be if instead of array it was JSON object. Would we also need to export it from seperate component and then require? How would we iterate through it?</p>
  
  <p><a href="https://i.stack.imgur.com/wpW5Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wpW5Z.png" alt="enter image description here"></a></p>