in the code below i am fetching data from an API and want to display it on a page.

```
import React, { useState, useEffect } from "react";
import '../all.css';
import Axios from "axios";

const AllProduct = () => {

const [products, setProducts] = useState([]);

const fetchProducts = async () => {
  const { data } = await Axios.get(
     "http://localhost:8080/api/QueryAllProducts"

    );

  console.log(data.response);
  setProducts(data.response);
  console.log(products);

};
const display = () => {

  return (products || []).map(product => (
    <tr key={product.id}>
       <th>{product.id}</th>
       <th>{product.name}</th>
       <th>{product.area}</th>
       <th>{product.ownerName}</th>
       <th>{product.cost}</th>
     </tr>
   ) );

 }
useEffect(() => {
  fetchProducts();
}, []);

  return (

    <div>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Area</th>
      <th>Owner Name</th>
      <th>Cost</th>

    </tr>
  </thead>
  <tbody>
  {display()}

  </tbody>

</table>
    </div>

  )
}

export default AllProduct;

```

i did almost every method which i found on stackoverflow but still can't resolve the error. In frontend i have used ReactJS and in Backend i am using NodeJS

[here is the screenshot of the error i am getting](https://i.stack.imgur.com/xR4J6.png)