onClick on dynamically created React components

Asked

Viewed 1,678 times

0

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.

  • The = and a } there... must be onClick={this.addBetCard.bind(this)}

  • The = after the onClick... I don’t see where the variable dataFake is used. The problem still remains?

  • Thanks. Any suggestions on how to solve the problem?

  • Uses this.createMatches.call(this, dataFake)

1 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>
    )
}
  • Unfortunately the solution you passed didn’t work in my case. I was able to solve but the way I solved it finding it well 'gambiarrosa'. I will edit the above question to see if there is a more elegant solution.

  • @Lukssys is hard to tell how your component is doing. You can adapt this jsFiddle https://jsfiddle.net/paul_lecam/q2v7t59h/ with your component to view?

  • OK! I’ll do it

  • https://jsfiddle.net/lucassilvax/q2v7t59h/255/. The objective is to click on one of the <H1> and display a click warning.

  • @Lukssys ok, I’ve now reviewed: https://jsfiddle.net/xwzfv7pc/ And what you want to show on console when there is click? the name of the team?

  • Just what I need.

  • It worked, thank you so much for the help. I would give 2 up in your reply!!!

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.