ReactJS - Passing function deeper

Question

Do you know why, when I invoke function outside of map it works, but not inside? I was trying to pass "this" in map's callback function argument. I trine to bind inline inside of map and nothing worked.

var React = require('react');
var PropTypes = require('prop-types');

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      events: props.events
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e){
    console.log("Boom!")
  }
  render() {
    return (
      <div>
        <table onClick={this.handleClick}><tbody>
        {this.props.events.map(function(event){
               return(
                   <tr key={event.position}>
                   <td onClick={this.handleClick}>{event.position}</td>
                   <td>{event.start_time}</td>
                   <td>{event.duration}</td>
                   <td>{event.end_time}</td>
                   <td>{event.text}</td>
                   </tr>
               ) 
            })}
        </tbody></table>
      </div>
    )
  }
}
module.exports = List;

Please advise

Andy Ray · Accepted Answer · 2017-06-30 22:40:15Z

1

Change it to a fat arrow function which makes this fall back to the outer scope. A function creates a new this when executed the way you're using it.

{this.props.events.map((event) => {
    ...
})}

answered Jun 30, 2017 at 22:40

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

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

2 Comments

Michał Zbigniew Hoffman Over a year ago

Thanks a lot, that helped. It works even without binding in the constructor. I heard that fat arrow functions work differently. Is it possible to achieve the same not using it? I try to understand why binding didn't work this time. Trying to be clever one day :D

Michał Zbigniew Hoffman Over a year ago

Yeah, that looks like making more sense than the things I tried to do. Thank You Bossman!

Collectives™ on Stack Overflow

ReactJS - Passing function deeper

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related