Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead

Question

I am trying to import data from a json file and render a list of images. But I get an error saying: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

This is the file which seems to generate the error:

import React from 'react';
import Product from "./Product/index";

const ProductList = () => {
    const renderedList = import("../../../data/data.json").then(json 
    => json.goods.map(image => {
        return <div><Product images={image.pictures} /></div>
    }
));

    return <div>{renderedList}</div>
}

export default ProductList;

This is my data.json file:

{
"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": ""    
    }]
}

This is my Product component:

import React, { Component } from "react";
import Thumb from "../../../Thumb/index";

const Product = props => {
        return (
            <div className="shelf-item">
                <div className="shelf-stopper">Free shipping</div>
                <Thumb 
                    classes="shelf-item__thumb"
                    src={props.images}
                />
                <p className="shelf-item__title">product</p>
                <div className="shelf-item__price">
                    productInstallment  
                </div>
                <div className="shelf-item__buy-btn">Add to cart</div>
            </div>
        );
    }

export default Product;

Could someone help me figure it out? Thanks a lot!

Answer 1

In your productList component you are using a promise instead of rendering child, to overcome this you can make it a stateful component fix this like:

import React, { Component } from 'react';
import Product from "./Product/index";

class ProductList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      goods: []
    }
  }

  componentDidMount = () => {
    import("../../../data/data.json")
      .then(json => this.state({ goods: json.goods }))
  }

  render() {
    const { goods } = this.state
    return (
      <div>
        {goods.map(image => <div><Product images={image.pictures} /></div>)}
      </div>
    )
  }
}

export default ProductList;

or alternatively you can import it in beginning like:

import React from 'react';
import Product from "./Product/index";
import goods from "../../../data/data.json"

const ProductList = () => {
  const renderedGoods = goods.map(image => {
    return <div><Product images={image.pictures} /></div>
  })
  return <div>{renderedGoods}</div>
}

export default ProductList;

Not an issue, yes you resolved the promise correct,

but as even when you type in console what you are actually returning is a promise and .then or .catch are callbacks called when its either resolved or rejected so you see react wants is something to render and you cannot render a promise