Nested array parsing - reactjs

Question

Hi I am parsing nested array but getting ReferenceError: player is not defined . I have state variable players which is json array as follows :
[
{
"game": "badminton",
"players": [
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
}
]
},
{
"game": "football",
"players": [
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
}
]
}
]
I am parsing it inside render function and creating a card based UI element for my view as follows :
render(){
// console.log(this.players);
var topplayers=[];
this.state.players.map(function(game,index){
topplayers.push(<div class="row" style={styles.row}>
<div class="col">
{game.game} Legend in Bangalore
</div>
</div>);
const row=<div class="row">;
topplayers.push({row});
game.players.map(function(player,index){
topplayers.push(<div class="col">
<div class="card">
<img class="card-img-top" src={player.url} alt="200-200" style={styles.image}/>
<div class="card-body">
<h4 class="card-title">{player.name}</h4>
<div >
<div style={styles.div}><img src="../../images/points.png" style={styles.rankimg}/>{player.points}</div>
<div style={styles.div}><img src="../../images/rank.png" style={styles.rankimg}/>{player.rank}</div>
</div>
View Profile
</div>
</div>
</div>)
}
)
const rowend=</div>;
topplayers.push({rowend})
}
)
return(
<div>
{topplayers}
</div>
);
}
But I am getting error ReferenceError: player is not defined . can someone help me where am I making mistake.

Answer 1

The problem is the const variables declared.
const row=<div class="row"> Here, div is marking start of html and
const rowend=</div>; here is ending tag.
So, everything in between is considered plain html. The map function is not behaving as a function but plain html. And that's why when player is put inside {}, javascript is trying to find the variable which doesn't exists.
Basically, in your code; everything written between <div class="row"> and </div> is considered html
To make it work, you need to restructure the code to something like this:
render(){
// console.log(this.players);
var topplayers=[];
this.state.players.map(function(game,index){
topplayers.push(<div class="row" style={styles.row}>
<div class="col">
{game.game} Legend in Bangalore
</div>
</div>
);
const row=<div class="row">
{game.players.map(function(player,index){
return (<div class="col">
<div class="card">
<img class="card-img-top" src={player.url} alt="200-200" style={styles.image}/>
<div class="card-body">
<h4 class="card-title">{player.name}</h4>
<div >
<div style={styles.div}><img src="../../images/points.png" style={styles.rankimg}/>{player.points}</div>
<div style={styles.div}><img src="../../images/rank.png" style={styles.rankimg}/>{player.rank}</div>
</div>
View Profile
</div>
</div>
</div>)
})
}
</div>;
topplayers.push(row)
})
return(
<div>
{topplayers}
</div>
);
}
Here, I have moved the game.players.map in {} wrapped in the <div class="row"> and </div>. This will make sure to work it like a function. Instead of pushing result into an array, I am directly returning values from the map function which will be injected between the required divs.
Hope you understand.
Please revert in case of any doubts