onClick on dynamically created React components

Question

I have a component user-defined called <Match> that is created dynamically within another component <Event>. But when putting onClick on the component an exception is popped. How to solve the problem, being that for each component created dynamically I need onClick that in the future will create a new component.

Events.js:121 Uncaught Typeerror: Cannot read Property 'addBetCard' of Undefined(...)

Event js.

  createMatch (match) {
    return <Match source={match} key={match.id} onClick={this.addBetCard.bind(this)}/>;
  }

  createMatches (matches) {
    return matches.map(this.createMatch);
  }

render() {

   return(
   ...
      <div className="ListMatches">
      {this.createMatches(dataFake)}
      </div>
)}

Temporary output, how to improve?

My purpose is to have onClick inside the component <Match> and every time you click on the component call onClick of that component.

addBetCard(item){
    console.log("Adicionando item");
  }

createMatch (match) {
    return <a key={match.id} onClick={this.addBetCard.bind(this, match)}><Match source={match}/></a>;
}

createMatches (matches) {
    return matches.map((i) => this.createMatch(i));
    // return matches.map(this.createMatch);
}

render() {

   return(
   ...
      <div className="ListMatches">
      {this.createMatches(dataFake)}
      </div>
)}

The chunk of code I put just above solves my problem, that when you click on the component to call its onClick method. But it’s a very elegant exit where I need to put my component <Match> within a tag <a> which in turn has onClick.

Answer 1

You have to fix the "bindings", that is to ensure that the execution context is the correct one.

You can do it like this:

constructor(props){
    super(props);
    this.addBetCard = this.addBetCard.bind(this);
    this.createMatch = this.createMatch.bind(this);
    this.createMatches = this.createMatches.bind(this);
}

createMatch (match) {
    return <Match source={match} key={match.id} onClick={this.addBetCard}/>;
}

createMatches (matches) {
    return matches.map(this.createMatch);
}

render() {
     // const dataFake = ['etc', 'etc'];
     return (
          // ...
          <div className="ListMatches">
          {this.createMatches(dataFake)}
          </div>
    )
}