1

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

RamblinRose
  • 4,883
  • 2
  • 21
  • 33
anonymus
  • 35
  • 5

1 Answers1

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));
sodhankit
  • 1,138
  • 1
  • 14
  • 26