Tengo un archivo JSON con 3 objetos diferentes dentro de ellos (tarjeta1, tarjeta2 y tarjeta3). Quiero recorrer estos objetos en JavaScript , convertirlos en una array de objetos, luego en mi código React, estoy tratando de convertirlos en Componentes dependiendo de cuántos hay en el archivo JSON.
Lo que tengo hasta ahora:
import Card from "./card-elements/Card"; import json from "./data.json"; const list = []; for (const key in json) { if (json.hasOwnProperty(key)) { list.push(key); } } function App() { return ( <div className="card-area"> {list.map(i => { return <Card title={i.title} description={i.description} borderColor={"red"}/> })} </div> ); } export default App;datos.json:
{ "card1": { "title": "Card One", "description": "This is card one's description. Straight from JSON file!" }, "card2": { "title": "Card Two", "description": "Directly from the JSON file, this is card two's description" }, "card3": { "title": "Card Three", "description": "And finally, this is the last cards description!" } }Salida actual: no se producen errores con mi React, solo muestra un componente y el "título" y la "descripción" no se muestran
Cualquier ayuda sería apreciada, ¡gracias!
No es necesario empujar cada elemento a una list y usarlo. En lugar de usar Object.entries .
Prueba así
function App() { return ( <div className="card-area"> {(Object.entries(json) || []).map(([key, value]) => { return ( <Card title={value.title} description={value.description} borderColor={"red"} /> ); })} </div> ); }En React, debe usar el enlace useState para actualizar un componente.
Try something like: import Card from "./card-elements/Card"; import json from "./data.json"; function App() { const [cardData, setCardData] = React.useState(); React.useEffect(() => { const list = []; for (const key in json) { if (json.hasOwnProperty(key)) { list.push(key); } } }, []) return ( <div className="card-area"> {cardData && list.map(i => { return <Card title={i.title} description={i.description} borderColor={"red"}/> })} </div> ); }exportar la aplicación predeterminada;