How to add a listener to the array of objects in ReactJs

Question

I have a prop called buttons, whose type is an array. I'm passing that to my component in a such a way that when present it should list all the buttons in that array, like this:

render() {
return (
<div>
      <MyComp title="Some titme" subtitle="subtitle" buttons={this.getButtonArray()}>
</div>
)
}
getButtonArray() {
    let buttonArray=[{
        type:"aaa",
        text: "Downlaod",
        onClick: {this.onCancel.bind(this)}//getting an eslint error saying Fatal: this is a reserved keyword
    }]
}

here is my MyComp defined:

export default class MyComp extends React.Component {

  static defaultProps = {
    buttons: [{
       text: "Confirm",
        type: "secondary",
       onClick : function() {console.log("Confirm clicked");}
     },
      {
       text: "cancel",
        type: "secondary",
       onClick : function() {console.log("cancel clicked");}
     }]

}
render() {
 return (
<div>
    {this.props.buttons && this.props.buttons.map(el => <Button key={el.type} text={el.text} type={el.type} onClick={el.onClick}/>)} //<Button> is another component imported.
</div>
)
}
}

Any ideas why "this" is not acceptable there and how can I possiblely have an onclick on an array of object?

Thanks

ladyk · Accepted Answer · 2019-02-27 23:56:02Z

1

You are passing function not object so you should remove {}, onClick: this.onCancel.bind(this) is enough.

answered Feb 27, 2019 at 23:56

ladyk

1061 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

How to add a listener to the array of objects in ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related