score:9

Accepted answer

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

score:1

close - move the import to the top of file:

import mydata from "../../../data/data.json";

then change your rendered list to this:

const renderedlist = mydata.goods.map(image => (<div><product images={image.pictures} /></div>));

score:2

it works but why you are importing json data use axios insted of import. axios documentation

your component will look like 

import react, { component } from 'react';
import axios from 'axios';
import product from "./product/index";

class productlist extends component {
  constructor(props) {
    super(props)
    this.state = {
      products: []
    }
  }

  componentdidmount = () => {
    axios.get("products.json").then(json => {
        this.setstate({ products: json.data.goods });
    });
  }

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

export default productlist;

keep your json or data file inside public folder

i hope this works for you

score:2

just use map or filter function as the array you are trying to render is an array of objects and those objects can't be rendered due to multiple re-rendering and hence react dom won't allow that .


Related Query

More Query from same tag