Por alguma razão, a função onClick pertencente a cada uma das imagens não está a funcionar corretamente... "index" deveria ser o indice da própria imagem, mas o React age como que todas as imagens tivessem sido clicadas. Alguém me consegue ajudar?
hanldeClick(index){
var x;
const newGames = this.state.games.slice();
if(this.state.games[index].selected) {
newGames[index].selected = false;
x = -1;
}
else {
newGames[index].selected = true;
x = 1;
}
this.setState({games: newGames, selected: this.state.selected + x});
}
renderGames(){
var arr = [];
const res = [];
const len = this.state.games.length;
var index = 0;
for(let i=0; i<Math.ceil(len/3); i++){
for(let j=0; j<3; j++){
if(index>=len)
break;
var style = this.state.games[index].selected ? "active" : "inactive";
arr.push(
<Col key={index}>
<img
onClick={()=>{this.hanldeClick(index)}}
className={style}
src={this.state.games[index].image}
alt={this.state.games[index].description}
/>
</Col>
);
index++;
}
if(index<=len){
res.push(<Row key={i} className='margin'>{arr}</Row>);
arr = [];
}
}
return res;
}