When I click on one of the picture listed in my functiondisplayCharacters()
, I call the function selectCharacter()
Then I get this error :
TypeError: Cannot read property 'selectCharacter' of undefined
Personnal analysis : this
refers to the map, not the Arena
object ?After searching I didn't find any solution.
class Arena extends Component {
//Constructeur
constructor(props){
super(props);
this.state = {
readyToFight: false, // Perso selectionnés ou non
}
}
// Ajoute la classe active au perso et passe le state readyToFight a true, ce qui activera le bouton VS
selectCharacter = (event, index, playerId) => {
event.preventDefault()
this.removeClass('div[data-player="' + playerId + '"] .App-character img.active', 'active')
event.target.className += ' active'
if(isElementPresent('div[data-player="0"] .App-character img.active')
&& isElementPresent('div[data-player="1"] .App-character img.active'))
{
this.setState({readyToFight: true})
}
}
//Affiche la liste de tous les persos dans l'Arene
displayCharacters = (playerId) => {
let characterToDisplay = this.props.characters.map(function(obj, index){
return(
<div key={index} className="App-character">
<img
src={process.env.PUBLIC_URL + obj.image}
alt="thumb"
onClick={(e) => this.selectCharacter(e, index, playerId)}
/>
</div>
)
})
return(characterToDisplay)
}
render = () => {
return(
<section className="App-section">
<div className="App-content">
<div className="grid-3">
<div className="App-characters grid-2" data-player={0}>{this.displayCharacters(0)}</div>
<div className="App-refery">
<button onClick={(e) => this.test(e, 0, 0)} className={(this.state.readyToFight ? 'App-btn enabled' : 'App-btn')}>VS</button>
</div>
<div className="App-characters grid-2" data-player={1}>{this.displayCharacters(1)}</div>
</div>
</div>
</section>
)
}
}