How to display API data using axios with React? [duplicate]

Question

I have the following code which works perfectly on a list of objects assigned to a const. But whenever I take the list of objects from a DRF API endpoint, I can console.log the objects, but cannot display information from the objects to the site. Here is the code that I use.

    const comps = []
    axios.get('http://127.0.0.1:8000/')
      .then(response => {
        const items = response.data;
        items.forEach((item) => {
          console.log(item)
          comps.push(<Item
                        id={item.id}
                        name={item.name}
                        inCart={this.state.cart[item.id]}
                        quantity={item.quantity}
                        unit={item.unit}
                        price={item.price}
                        handleDecreaseClick={handleDecreaseClick(item.id, item.price)}
                        handleIncreaseClick={handleIncreaseClick(item.id, item.price)}
                        key={item.id} />)
        })
      })
      .catch(function(error) {
        console.log(error);
      });

I know the loop is working perfectly because I can log the objects in the browser console.

But nothing is shown in the site. What could possibly be the problem?

how are you rendering it

Joe Warner
– Joe Warner

2018-03-25 17:07:29 +00:00
Commented Mar 25, 2018 at 17:07 — Joe Warner
– Joe Warner, Commented Mar 25, 2018 at 17:07

Eric · Accepted Answer · 2018-03-25 17:14:47Z

2

If you are doing this in within render() function, move the async request part to componentDidMount().

componentDidMount() {

  axios.get('http://127.0.0.1:8000/')
    .then((response) => {
      this.setState({items: response.data});
}

render() {
  return (
    <div>
      { this.state.items.map((item) => (
        <Item
          id={item.id}
          name={item.name}
          inCart={this.state.cart[item.id]}
          quantity={item.quantity}
          unit={item.unit}
          price={item.price}
          handleDecreaseClick={handleDecreaseClick(item.id, item.price)}
          handleIncreaseClick={handleIncreaseClick(item.id, item.price)}
          key={item.id}
        />
      )) }
    </div>
  );
}

answered Mar 25, 2018 at 17:14

Eric

2,7257 gold badges32 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aaron Rumery Over a year ago

There is no reason to answer this question. It should be marked as a duplicate. This exact question has been answered 100s of times.

Collectives™ on Stack Overflow

How to display API data using axios with React? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related