javascriptreactjsarrow-functions

React: Handling Events - parameter visibility


I am following React Doc. In 'Handling Events' section, the below code segment is there.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

in handleClick() function, how state is available for it to access? Why not this.state?


Solution

  • This is how this.setState works, its an updater callback passed for this.setState(), as per react documentation:

    Passing an update function allows you to access the current state value inside the updater. Since setState calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting

    more information can be found here as well.