react onClick not triggering function

Question

I have this child component which generates list elements which contain an image and 2 icons within an a tag.

return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>

This return is the return of a map function of a prop that has been passed from the parent component.

Somehow the onClick event doesn't trigger my showBild function.

Did I miss something ?

Heres my whole react code including parent and child component (showBild class can be ignored)

<script type="text/jsx">
  var Bilder = React.createClass({
    getInitialState: function() {
      return {
        data:[
                ['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
                ['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
                ['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
                ['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
                ['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg']
            ],
        currentPic:[],
        display:'showBild clearfix dn'
      };
    },
    bild: function(){

    },
    render: function() {
      return (
        <div>
          <SingleBild data={this.state.data} chosenBild={this.bild} />
          <BildDetail data={this.state.currentPic} display={this.state.display} />
        </div>
      );
    }
  });

  var SingleBild = React.createClass({
    getInitialState: function() {
      return {
        bild:[]
      };
    },
    showBild: function(e){
      e.preventDefault();
      alert("yolo");
      this.props.chosenBild(this.state.bild);
    },
    render: function() {
      var displayBild = function(bild){
             return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>
      };
      return (
        <ul className="dashboardUl bilder clearfix">
          <h2>Gemeldete Bilder:</h2>
          {this.props.data.map(displayBild)}
        </ul>
      );
    }

  });

  var BildDetail  = React.createClass({

    render: function() {
      return (
        <div className={this.props.display}>
          <img src={this.props.data[1]} alt="" />
          <ul>
            <li><a href="#"><i className="fa fa-trash-o"></i></a></li>
            <li><a href="#"><i className="fa fa-ban"></i></a></li>
          </ul>
        </div>
      );
    }

  });


  React.render(<Bilder />, document.getElementById('bilder'));
</script>

this is probably no longer correctly in scope due to your displayBuild function. You could make it a method on the component or bind it to this or create an outer variable like var component = this and use that in place of the this in the onClick parameter. — lemieuxster
– lemieuxster, Commented Jul 7, 2015 at 19:19

Phi Nguyen · Accepted Answer · 2015-07-07 20:04:35Z

2

In the render method of BildDetail, you should reference this keyword or bind it. For example:

 render: function() {
  var self = this;
  var displayBild = function(bild){
         return <li>...<a onClick={self.showBild} ....</a></li>
  };
  return (
    ....
  );
}

or you can bind it :

render: function() {
  var displayBild = function(bild){
         return <li>...<a onClick={this.showBild} ....</a></li>
  }.bind(this);
  return (
    ....
  );
}

answered Jul 7, 2015 at 20:04

Phi Nguyen

3,0561 gold badge16 silver badges26 bronze badges

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

1 Comment

noa-dev Over a year ago

Thank you - I'll try it out as soon as i get home :)

Collectives™ on Stack Overflow

react onClick not triggering function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related