title: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead
body: <p>I am trying to import data from a json file and render a list of images. But I get an error saying: <strong>Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.</strong></p>
  
  <p>This is the file which seems to generate the error:</p>
  
  <pre><code>import React from 'react';
  import Product from "./Product/index";
  
  const ProductList = () =&gt; {
      const renderedList = import("../../../data/data.json").then(json 
      =&gt; json.goods.map(image =&gt; {
          return &lt;div&gt;&lt;Product images={image.pictures} /&gt;&lt;/div&gt;
      }
  ));
  
      return &lt;div&gt;{renderedList}&lt;/div&gt;
  }
  
  export default ProductList;
  </code></pre>
  
  <p>This is my data.json file:</p>
  
  <pre><code>{
  "goods": [
      {
          "id": "1",
          "name": "Cat Tee Black T-Shirt",
          "prices": "$ 10.90",
          "pictures": "120642730401995392_1.jpg",
          "size": "",
          "quantity": ""    
      },
      {
          "id": "2",
          "name": "Dark Thug Blue-Navy T-Shirt",
          "prices": "$ 29.45",
          "pictures": "51498472915966370_1.jpg",
          "size": "",
          "quantity": ""    
      }]
  }
  </code></pre>
  
  <p>This is my Product component:</p>
  
  <pre><code>import React, { Component } from "react";
  import Thumb from "../../../Thumb/index";
  
  const Product = props =&gt; {
          return (
              &lt;div className="shelf-item"&gt;
                  &lt;div className="shelf-stopper"&gt;Free shipping&lt;/div&gt;
                  &lt;Thumb 
                      classes="shelf-item__thumb"
                      src={props.images}
                  /&gt;
                  &lt;p className="shelf-item__title"&gt;product&lt;/p&gt;
                  &lt;div className="shelf-item__price"&gt;
                      productInstallment  
                  &lt;/div&gt;
                  &lt;div className="shelf-item__buy-btn"&gt;Add to cart&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
  export default Product;
  </code></pre>
  
  <p>Could someone help me figure it out? Thanks a lot!</p>