map()
can only be used with Arrays. So, if you are getting error .map is not a function, you are probably using it on either the objects or other variables which are not array.
Consider this example –
var superHero = {
'hero' : [
'Captain America',
'Ironman',
'Hulk',
'Thor',
'Scarlet Witch',
],
}
const superHeroList = () => {
return (
<>
{
superHero.map(hero => {
return (<p>{hero}</p>)
})
}
</>
)
}
The above code will create error in map function. Because superHero
is not an array. Else it’s an object which has a property, hero
, which is an array of super heroes.
To correctly call map function, we need to change our code and instead of calling it as superHero.map
, we need to call it as superHero.hero.map
.
var superHero = {
'hero' : [
'Captain America',
'Ironman',
'Hulk',
'Thor',
'Scarlet Witch',
],
}
const superHeroList = () => {
return (
<>
{
superHero.hero.map(hero => {
return (<p>{hero}</p>)
})
}
</>
)
}