0

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>
    )
  }
 
 }
n00dl3
  • 21,213
  • 7
  • 66
  • 76
Janus
  • 645
  • 2
  • 7
  • 18

0 Answers0