No puedo mostrar los datos obtenidos en la página. Aquí estoy usando ReactJS para frontend y NodeJS para backend. Para almacenar datos, estoy usando blockchain (tejido Hyperledger)
Interfaz: 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;No puedo mostrarlo en la página. En frontend he usado ReactJS y en backend he usado nodeJS, Hyperledger Fabric y base de datos CouchDB
Siguiendo los cambios necesarios en su código
display es una función, por lo que debe llamarla como display()
coloca display() dentro de <tbody>
accesorios key al usar la función map()
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> ) ); } setProducts(JSON.parse(data.response));