How do I print the data from axios result?-CodePudding

I am getting the response and storing that into the array but I am unable to destructure the data from that array,How do i log title of every product inside the div ?

import React, { useEffect, useState } from "react";
import axios from "axios";

const ProductsAPI = () => {
  const [item, setItem] = useState([]);

  useEffect(() => {
    axios
      .get("https://fakestoreapi.com/products")
      .then((res) => setItem(res.data));
  }, []);

  return <div></div>;
};

export default ProductsAPI;

CodePudding user response：

You can map over the state value inside your render

<div>
<ul>
{item.map((item,index) =><li key={index}>
{item.title}
</li>) }
</ul>
</div>

CodePudding user response：

You need to loop through your res.data by mapping inside of your render().

useEffect(() => {
    axios.get(`https://fakestoreapi.com/products`)
        .then(res => {
            const yourSavedData = res.data;
            this.setState({yourSavedData });
        })
}

render() {
return (
    <div>
    {
        this.state.yourSavedData 
           .map(someName => // <-- Your Callback
               <div data-something={yourSavedData.whatever_key}>{yourSavedData.another_key}</div><br />
            )
    }
    </div>
    )
}