En un componente React
import React from 'react'; export default function Customers (props) { const [customers, setCustomers] = React.useState([]); React.useEffect(() => { fetch("/data.json").then(response => response.json()) .then(data => { setCustomers([data]) }) }, []); return ( <div id='Customers'> {customers.map(c => c.name)} </div> )¿Cómo puedo mostrar solo los nombres de los clientes de un archivo en el directorio público llamado data.json?
{ "customers": [ { "id": 542, "name": "E" }, { "id": 354, "name": "V" }, { "id": 54534 "name": "A" } , { "id": 33, "name": "K" } ], "packages": [ { "id": 3643453453453, "weight": 6343 }, { "id": 453453, "weight": 4534534534 } ] }Intenté usar clientes["clientes"] o clientes.clientes pero nada funcionó...
Gracias.
Creo que deberías cambiar el React.useEffect a esto
React.useEffect(() => { fetch("/data.json") .then(response => response.json()) .then(data => { setCustomers(data.customers) //this is where I made the change }); }, []);import React from 'react'; export default function Customers (props) { const [data, setData] = React.useState({}); React.useEffect(() => { fetch("/data.json").then(response => response.json()) .then(res => { setCustomers(res) }) }, []); return ( <div id='Customers'> {data && data.customers ? data.customers.map(c => c.name) : null} </div> )