Tengo un objeto que tiene una matriz de objetos y otros 2 pares clave-valor. Me quedo atascado en cómo mostrar los valores de los objetos. Recibí un error que muestra 'TypeError: obj.map is not a function .
este es mi codigo
import React from 'react' function MapObj() { const obj = { items: [ { id: 1, title: 'Pizza' }, { id: 2, title: 'Hot-Dog' } ], total: 200, isEmpty: false }; const mappedObj = obj.map(item => { return ( <> <div key={item.items.id}> <h2>{item.items.title}</h2> </div> <p>{item.total}</p> <p>{item.isEmpty}</p> </> ) }) return ( <div style={{textAlign: 'center', color: 'maroon'}}> {mappedObj} </div> ) } export default MapObjEl map de funciones no existe en un object sino solo en una array .
Intente usar el map en object.items en lugar de en el objeto directamente. También puede acceder a la propiedad utilizando item.id por ejemplo, directamente.
Como esto:
import React from 'react' function MapObj() { const obj = { items: [ { id: 1, title: 'Pizza' }, { id: 2, title: 'Hot-Dog' } ], total: 200, isEmpty: false }; const mappedObj = obj.items.map(item => { return ( <> <div key={item.id}> <h2>{item.title}</h2> </div> <p>{obj.total}</p> <p>{obj.isEmpty}</p> </> ) }) return ( <div style={{textAlign: 'center', color: 'maroon'}}> {mappedObj} </div> ) } export default MapObjNo puede aplicar el mapa de métodos en un objeto. Intenta aplicarlo en la matriz dentro del objeto:
const mappedObj = obj.items.map(item => { return ( <> <div key={item.id}> <h2>{item.title}</h2> </div> <p>{obj.total}</p> <p>{obj.isEmpty}</p> </> ) })El objeto no tiene map
Puede utilizar este enfoque:
const mappedObj = obj.items.map(item => { return ( <> <div key={item.id}> <h2>{item.title}</h2> </div> </> ) return ( <div style={{textAlign: 'center', color: 'maroon'}}> {mappedObj} <p>{obj.items.total}</p> <p>{obj.items.isEmpty}</p> </div> ) Y también puede hacer un bucle del objeto con for in loop