onClick function for array of buttons not working

Question

Here the List get's 'n' values from the app.component. I am trying to write onclick function for each of the buttton. Here, is the code

onChildButtonClick = (val) => {
console.log(val);}



function makeButton(data) {
return (
     <button onClick = {this.onChildButtonClick.bind(null, data.name)} > 
        {data.name} </button>
);}

const List = (props) => {
    const {projectnames} = props
    return (
        <tr>
        <div> {
            projectnames.map(makeButton, this)
        }
        </div>
        </tr>
    )
}

When I try to execute it throws me an error onChildButtonClick is not defined.

can you share full code of class

akcoban
– akcoban

2018-09-20 22:20:33 +00:00
Commented Sep 20, 2018 at 22:20 — akcoban
– akcoban, Commented Sep 20, 2018 at 22:20

nbwoodward · Accepted Answer · 2018-09-20 22:16:44Z

1

As your code stands above, you're referencing this.onChildButtonClick which is looking within the scope of the function. But your function onChildButtonClick is outside of that scope.

Edit:

I haven't had a chance to test it, but try this out:

function makeButton(data) {

  const onChildButtonClick = (val) => {
    console.log(val);
  }

  return (
       <button onClick = {onChildButtonClick.bind(this, data.name)} >
          {data.name} </button>
  );
}

const List = (props) => {
    const {projectnames} = props
    return (
        <tr>
        <div> {
            projectnames.map(makeButton, this)
        }
        </div>
        </tr>
    )
}

edited Sep 20, 2018 at 22:16

answered Sep 20, 2018 at 22:03

nbwoodward

3,1961 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

daniel cliff Over a year ago

So what do I do now?

nbwoodward Over a year ago

Try removing the "this" from this.onChildButtonClick.

nbwoodward Over a year ago

See edit... Didn't have a chance to test, but it might fix the scope issue.

devserkan Over a year ago

@danielcliff, then consider accepting this answer if it helped you, please.

Collectives™ on Stack Overflow

onClick function for array of buttons not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related