Render axios response in Reactjs

Question

I am trying to render the response from Axios in reactjs. The response is data from the MySQL database. Please see my code below and am getting the error message Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. I will appreciate any assistance. Thanks.

const Products = () => {

  const fd =  () => {
    return Axios.get("http://localhost:5000/popular-products")
           .then(response => response.data)
  }

  return (
    <Container>
      {fd().then((data) => {
        data.map((item)=>(
          <h1>{item.prod_name}</h1>
        ))
      })}

    </Container>
  );
};

export default Products;

you're trying to resolve the promise WITHIN JSX. do everything within that function (fd) and get the final data. use useState and set the state with that final data and THEN you map over the list and return JSX. — emre-ozgun
– emre-ozgun, Commented Dec 28, 2021 at 0:30
Does this answer your question? How can display data fetched from an api properly in react? — Matt U
– Matt U, Commented Dec 28, 2021 at 0:32
I tried useState, but the axios response is loading multiple times — Nemo17
– Nemo17, Commented Dec 28, 2021 at 0:33

Rahul · Accepted Answer · 2021-12-28 03:39:09Z

3

Best practice to resolve promise outside the JSX. You can use bellow approach if you like.

const [items, setItems] = useState([]);

const fetch = () => {
    axios
      .get("http://localhost:5000/popular-products")
      .then((response) => setItems(response.data));
};

// component did mount
useEffect(() => {
   fetch();
}, []);

return (
  <div className="App">
      {items.length > 0 && items.map((item) => <p key={item.id}>{item.prod_name}</p>)}
  </div>
);

In here I have used component did mount to fetch data when component mounted.

answered Dec 28, 2021 at 3:39

Rahul

4051 gold badge4 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Render axios response in Reactjs

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related