Estoy trabajando en un proyecto simple en React y, como soy nuevo en React, tenía problemas para mapear el archivo json dado para enviar los objetos requeridos a diferentes componentes.
Este es el archivo JSON que me dieron (a través de API)
{ "trees":{ "name":"a", "age":"9", "height":"10", "location":"park" }, "cars":{ "name":"b", "age":"30", "height":"10", "location":"park" }, "bikes":{ "name":"c", "age":"110", "height":"10", "location":"park" },......................... Este es el json que busco en App.js. Mi idea es enviar esto completamente a otro componente (Data.js) y luego de data.js a otro componente que tendrá árboles, autos, bicicletas. No puedo mapear a través de este archivo json en ningún nivel, incluso después de hacer const d = [jsonfile] incluso después de esto, me quedo sin definir durante el mapeo.
Aplicación.js
const[Data,setData] = useState([]); useEffect(()=>{ fetch('API-HERE').then((result)=>{result.json().then((resp)=>{ setData(resp); })}) },[]) return ( <div className="App"> <DataFetched data={Data} /> </div> );Después de esto, no puedo mapear en DataFetched.js para enviarlo a otro niño, solo árboles, autos, bicicletas por separado para que se puedan leer sus atributos.
Use Object.entries para iterar sobre las propiedades JSON .
Puedes probar así.
import React from "react"; const DataFetched = ({ data }) => { if (!data) { return null; } return Object.entries(data).map( ([key, { name, age, height, location }]) => { return ( <div key={key}> <div>{name}</div> <div>{age}</div> <div>{height}</div> <div>{location}</div> </div> ); } ); }; export default DataFetched;O puede recibir los datos de otro componente secundario.
import React from "react"; const MyChildComponent = ({ data: { name, age, height, location } }) => { return ( <div> <div>{name}</div> <div>{age}</div> <div>{height}</div> <div>{location}</div> </div> ); }; const DataFetched = ({ data }) => { if (!data) { return null; } return Object.entries(data).map( ([key, value]) => { return ( <MyChildComponent data={value}/> ); } ); }; export default DataFetched;