I have an object which has an array of objects and 2 other key-value pairs.
I get stuck on how to display the object values. I got an error showing 'TypeError: obj.map is not a function.
This is my code
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 MapObj
The function map does not exist on an object but only on an array.
Try to use map on object.items instead on the object directly. Also you can access the property using item.id for example directly.
Like this:
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 MapObj
You cannot apply the method map on an object. Try applying it on the array inside the object:
const mappedObj = obj.items.map(item => {
return (
<>
<div key={item.id}>
<h2>{item.title}</h2>
</div>
<p>{obj.total}</p>
<p>{obj.isEmpty}</p>
</>
)
})
Object don't have map
You can use this approach :
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>
)
And you can also loop the object with for in loop