Cannot get the data on the list with fetch and reactjs

Question

I developed a list which get the data of my product, I try that with the fetch and I get the data on the console but It not rendering on the list.

My code is :

constructor(props) {
        super(props);
           this.state = {
                products :[],
                id:props.match.params.id
  }
}
      componentWillReceiveProps(nextProps) {
        console.log("nextProps", nextProps);
    }
    componentDidMount() {

      fetch('http://172.16.234.24:8000/api/productDetail/'+this.props.match.params.id) 
      .then(Response => Response.json())
      .then(data => 
       {console.log(data.productDetails)
         this.setState({ products: data.productDetails})})
   }
render() {

      let {products} = this.state;
      console.log(products)
     return (


      <div><Well><strong>The details of your product: </strong>
                          <ul>
                            <li><strong>Product name :</strong></li><br/>
                            <li><strong>Categorie name :</strong></li><br/>
                            <li><strong>TaxRate :</strong></li><br/>
                            <li><strong>Description :</strong></li><br/>
                          </ul> 
                          <ul>{products && products.length && products.map(product => (
                                  <li key={product.id}>
                                  {console.log(product.id)}
                                  <li>{product.name}</li><br/>
                                  <li>{product.categorie_id}</li><br/>
                                  <li>{product.taxRate}</li><br/>
                                  <li>{product.description}</li><br/>
                                  </li>))}
                            </ul>
             </Well></div>
      )
    }
}

when I run it, I get the data on the console :

but my list is empty like that :

How can I fix that ?

@Jayavel can you take a look please of my post ! ? I edit it. — Ichrak Mansour, Jan 24 '19 at 09:01
so you need to render that this.state.products(object) to render list ? In my example, data is static because I can't access your api, check the https://stackblitz.com/edit/react-3cvlkf — Jayavel, Jan 24 '19 at 09:15

Treycos · Accepted Answer · 2019-01-24T09:25:52.753

From what I understood, this is the result you are looking for :

const data = [
    {
        id: 8,
        name: "AAAA",
        categorie_id: 45,
        taxRate: 78,
        description: "Wow, so cool"
    },
    {
        id: 15,
        name: "BBBB",
        categorie_id: 8,
        taxRate: 5,
        description: "damn"
    },
    {
        id: 86,
        name: "BBBBBBBFFFF",
        categorie_id: 876,
        taxRate: 0,
        description: "hey, you !"
    }
]

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: [],
            //id: props.match.params.id
        }
    }

    componentDidMount() {
        this.setState({ products: data })
    }

    render() {
        const { products } = this.state;

        return (
            <div>
                    {products && products.length && products.map(({id, name, categorie_id, taxRate, description}) => 
                        <div key={id}>
                            <strong>The details of your product: </strong>
                            <ul>
                                <li><strong>Product name : </strong>{name}</li><br />
                                <li><strong>Categorie name : </strong>{categorie_id}</li><br />
                                <li><strong>TaxRate : </strong>{taxRate}</li><br />
                                <li><strong>Description : </strong>{description}</li><br />
                            </ul>
                        </div>
                    )}
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'>

You should include the product field name into the map function.

EDIT

From your console output I think you likely forgot to take the right value in your data :

fetch('http://172.16.234.24:8000/api/productDetail/'+this.props.match.params.id) 
  .then(Response => Response.json())
  .then(data => 
   {console.log(data)
     this.setState({ products: data.['product details'] })})

Just add .['product details']to take the details from your data.

EDIT 2

If your data is not an array, the following code should be enough :

const data = {
        id: 8,
        name: "AAAA",
        categorie_id: 45,
        taxRate: 78,
        description: "Wow, so cool"
    }

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            products: [],
            //id: props.match.params.id
        }
    }

    componentDidMount() {
        this.setState({ products: data })
    }

    render() {
        const { products: { name, categorie_id, taxRate, description } } = this.state;

        return (
            <div>
                <strong>The details of your product: </strong>
                <ul>
                    <li><strong>Product name : </strong>{name}</li><br />
                    <li><strong>Categorie name : </strong>{categorie_id}</li><br />
                    <li><strong>TaxRate : </strong>{taxRate}</li><br />
                    <li><strong>Description : </strong>{description}</li><br />
                </ul>
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'>

Yes, this is obvious. Just change what I put in `componentDidMount` with your function. I can't test it for you — Treycos, Jan 23 '19 at 09:56
@Treycos can you take a look a please on my post ? I add a picture of the console. — Ichrak Mansour, Jan 23 '19 at 10:02
It is still not working, the problem is `['product details']` — Ichrak Mansour, Jan 23 '19 at 12:24
I don't get any error but the list is not working and I cannot render it — Ichrak Mansour, Jan 24 '19 at 09:05
Well this link is not giving me anything : http://172.16.234.24:8000/api/productDetail/22. Unless it is not public ? — Treycos, Jan 24 '19 at 09:16
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187238/discussion-between-treycos-and-codelover). — Treycos, Jan 24 '19 at 09:16

score 1 · Answer 2 · answered Jan 25 '19 at 15:19

Hope your data looks like below:

this.state = { 
  product_details: {
    Categorie: {},
    categorie_id: 4,
    name: "Testview",
    id: 33,
    description: "yes it works", 
    rate: 0,
    vat: {},
    vat_id: 2
  }
};

to render this in list :

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = { 
      product_details: {
        Categorie: {},
        categorie_id: 4,
        name: "Testview",
        id: 33,
        description: "yes it works", 
        rate: 0,
        vat: {},
        vat_id: 2
      }
    };
  }

  render() {
    const {name, categorie_id, id, description} = this.state.product_details;
    return (
      <>
        <strong>The details of your product: </strong>
          <ul>
            <li><strong>Product name : </strong><span>{name}</span></li><br/>
            <li><strong>Categorie name :</strong><span>{categorie_id}</span></li><br/>
            <li><strong>TaxRate :</strong><span>{id}</span></li><br/>
            <li><strong>Description :</strong><span>{description}</span></li>
          </ul>
      </>
    );
  }
}

render(<App />, document.getElementById('root'));

Demo link on this available here

Edit :

As you need to render object on the list item, that will be available here

Cannot get the data on the list with fetch and reactjs

2 Answers2