Not able to display fetched data on page, React JS

Question

I am unable to display fetched data on page. Here I am using ReactJS for frontend and NodeJS for backend. To store data I am using blockchain (hyperledger fabric)

Frontend: ReactJS,

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 am not able to display it on page. In frontend I have used ReactJS and in backend I have used nodeJS, Hyperledger Fabric and CouchDB database

updated screenshot

Answer 1

Following changes needed in your code

1. display is function so you should call it like display()

2. place display() inside <tbody>

3. key props while using map() function

   const display = () => {
   
   if(products.length===0) return null;
   
   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>
   ) );
   
   }
   

4.  setProducts(JSON.parse(data.response));