title: React- Map function in component doesn't work
body: <p>I'm working with a small application, where I am using react.js. Since I am a beginner I have some issues with it. </p>
  
  <p>I want to map my array, but it won't work. I followed a youtube tutorial and the difference is that the array is populated with hardcoded data. I'm fetching my data and add it into the array when the fetch is complete. (JSON objects). </p>
  
  <pre><code>import React from "react";
  import Product from "./Product"
  
  export default class ProductList extends React.Component{
  render()
  { console.log("productlist")
  
      return (
       &lt;ul&gt;
       {this.props.products.map((product, i) =&gt; 
          { return &lt;Product product={product} key={i}/&gt;  })}
          {console.log("test")}
      &lt;/ul&gt; 
       )
  
  }
  }
  </code></pre>
  
  <p>The console.logs works, but the map-function does not. I have tried without the Id, and in different ways but it won't work. I want the data to pass into my last component, called Product. There are my &lt; li> elements I want to get populated.</p>
  
  <p>When I just passed the "this.props.products" in to "" then I reached the Product component, but no population of data.
      import React from "react";</p>
  
  <pre><code>export default class Product extends React.Component{
  render(){
      console.log("product")
  
      return (   
    &lt;li&gt; {this.props.product.title} {this.props.product.price} &lt;img src={this.props.product.imageUrl}/&gt; &lt;/li&gt;
      )
  }
  }
  </code></pre>
  
  <p>I'm using a fetch method to get data from a Json-file.</p>
  
  <pre><code>fetch('http://localhost:8080/products')
  .then(
  response =&gt;
    response.ok
      ? response.json()
      : Promise.reject(Can't communicate with REST API server (${response.statusText})`),
  )
  .then(products =&gt; {
      products.forEach(product =&gt; productArray.push(product));
  })
  </code></pre>
  
  <p>As you can see above I'm adding the products from the Jsonfile into an array I've created. And I am not sure if that is the thing that causes my problem. </p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Container from "./Components/Container";
  
  let productArray = []; 
  const app = document.getElementById('app');
  ReactDOM.render(&lt;Container products={productArray}/&gt;, app)
  </code></pre>
  
  <p>I am passing my array into my Container.js file using the ReactDOM.render. 
  And inside of the Container.js file, I also have import React from react and import ProductList from ./Productlist. So I continue to pass the array (and I have checked if there are values in it, and there is. </p>
  
  <pre><code>  &lt;ProductList products = {this.props.products}/&gt;
  </code></pre>