handleClick while mapping an array in react

Question

I am trying to map through an array and create links which will update state. When I map through the array and create the links I get :

TypeError: Cannot read property 'handleClick' of undefined

var FilterList = React.createClass({
  handleClick : function(e, list){
          this.props.callbackFromParent(list);
                this.setState({showing : list});
            },
  render: function() {
          if(this.props.sdata ){
           var seasons ='';
            seasons = this.props.sdata.Seasons.map(function(season, i) {
              if(i < 30) {
              var playkey = season.mediaId;
              var name = season.Season;
          return (
             <li> <a href="#" onClick={(e) => this.handleClick(e, {playkey})}>{name}</a></li>
          );
        }else{
          return (<div key={playkey}></div>);
        }
      });
         return (
      <Row className="singleChannelSeasonsList">
        <Grid>
            <Col md={12}>
                <ul className="seasons">
                {seasons}
                </ul>
            </Col>
      </Grid>
    </Row>
    );
          } else {
    return (

      <Row className="singleChannelSeasonsList">
        <Grid>
            <Col md={12}>
                <ul className="seasons">
                <li><a href="#" className="activeItem" onClick={(e) => this.handleClick(e, "list")}>All</a></li>
                    <li> <a href="#" onClick={(e) => this.handleClick(e, "category/Entertainment")}>Entertainment</a></li>
                    <li><a href="#" onClick={(e) => this.handleClick(e, "category/Health%20&%20Wellness")}>Health &amp; Wellness</a></li>
                    <li> <a href="#" onClick={(e) => this.handleClick(e, "category/Opinion")}>Opinion</a></li>
                </ul>
            </Col>
      </Grid>
    </Row>
    );
   }
  }
});
export default FilterList;

How can I map through the data and generate the handleclick links. {this} is bound and it works when i dont have this.props.sdata. Thanks!

Possible duplicate of React 'cannot read property of undefined' despite correct binding — Shubham Khatri
– Shubham Khatri, Commented Aug 24, 2017 at 5:10

Exit Ekkasit Pinyoanuntapong · Accepted Answer · 2017-08-24 04:34:57Z

1

The problem is the value of "this" keyword is determined by how a function get called. "this" is called inside of anonymous function in "map()". So "this" will be undefined.

Solution:

Bind() "this" to anonymous function

  this.props.sdata.Seasons.map(function(season, i) {
    //....blah blah blah      
  }.bind(this));

Set "this" to the second argument of "map()" function

  this.props.sdata.Seasons.map(function(season, i) {
       //....blah blah blah 
  },this);

answered Aug 24, 2017 at 4:34

Exit Ekkasit Pinyoanuntapong

1161 silver badge9 bronze badges

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

Comments

thinhvo0108 · Accepted Answer · 2017-08-24 04:21:17Z

0

You haven't bound {this} to this.props.sdata.Seasons.map( () => {} ) yet!

It should be:

render: function() {
  if(this.props.sdata ){
    var seasons ='';
    seasons = this.props.sdata.Seasons.map( (season, i) => {
      //...
    });
  } else {
    //...
  }
  //...
}

answered Aug 24, 2017 at 4:21

thinhvo0108

2,2301 gold badge16 silver badges24 bronze badges

Comments

Ali · Accepted Answer · 2017-08-24 04:24:09Z

0

If I understand your question correctly, you need to bind this to your event handler:

...
onClick={this.handleClick.bind(this)}
...

answered Aug 24, 2017 at 4:24

Ali

4884 silver badges10 bronze badges

Collectives™ on Stack Overflow

handleClick while mapping an array in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related