OnClick Event binding in React.js while code is in variable

Question

I am trying to generate click event for button. I have put button in variable to map different buttons for service but click event is not working. Its giving "Cannot read property 'addCompnay' of undefined.". Can someone help me with this.

   class Sidebar extends React.Component {

    constructor(props) {

       super(props);

       this.state = {

          allServices:[],

       }

       this.addCompnay = this.addCompnay.bind(this);


  }

  addCompnay() {

      alert("asd");

  }

  render() {

  var sidebarpagedata = this.state.allServices.companies.map(function(sidebarpagedata, index){
<Button type="button" className="default pull-right" onClick={this.addCompnay} >Apply Now</Button>

 })

 return (

  {sidebarpagedata}

 );

}

Sagiv b.g · Accepted Answer · 2019-03-27 15:09:49Z

2

You got 2 problems with this code:

  var sidebarpagedata = this.state.allServices.companies.map(function(sidebarpagedata, index){
<Button type="button" className="default pull-right" onClick={this.addCompnay} >Apply Now</Button>

 })

Your map function is has a different this context, either user an arrow function or pass the this explicitly:

var sidebarpagedata = this.state.allServices.companies.map((sidebarpagedata, index) => {
<Button type="button" className="default pull-right" onClick={this.addCompnay} >Apply Now</Button>

 })

The second problem here is that you are missing a return, change it to this:

var sidebarpagedata = this.state.allServices.companies.map((sidebarpagedata, index) => {
 return (<Button type="button" className="default pull-right" onClick={this.addCompnay} >Apply Now</Button>)

 })

answered Mar 27, 2019 at 15:09

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

1 Comment

Aspl Test Over a year ago

because of this code, Click event is generated even if we have not clicked on element. While page scroll or rendering event is called automatically

Jasmin Mistry · Accepted Answer · 2019-03-27 15:03:23Z

1

Use

  render() {
     var sidebarpagedata = this.state.allServices.companies.map((sidebarpagedata, index) => {
         <Button type="button" className="default pull-right" onClick={this.addCompnay} >Apply Now</Button>
    })

    return (
        {sidebarpagedata}
    );

}

answered Mar 27, 2019 at 15:03

Jasmin Mistry

1,4861 gold badge19 silver badges25 bronze badges

2 Comments

Aspl Test Over a year ago

What you have changed ?

Aspl Test Over a year ago

because of this code, Click event is generated even if we have not clicked on element. While page scroll or rendering event is called automatically

fahad tufail · Accepted Answer · 2019-03-27 15:09:00Z

0

In the following case you don't need to bind the function if using an arrow function.

class Sidebar extends React.Component {

    constructor(props) {

       super(props);

       this.state = {

          allServices:[],
       }
  }

  addCompnay = () => {
      alert("asd");
  }

  render() {

  var sidebarpagedata = this.state.allServices.companies.map(function(sidebarpagedata, index){
<Button type="button" className="default pull-right" onClick={() => this.addCompnay()} >Apply Now</Button>

 })

 return (

  {sidebarpagedata}

 );

}

answered Mar 27, 2019 at 15:09

fahad tufail

6154 silver badges11 bronze badges

Collectives™ on Stack Overflow

OnClick Event binding in React.js while code is in variable

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related