Breaking News: Grepper is joining You.com. Read the official announcement!

reactjs ES6 class event listeners in jsx

Innocent Iguana answered on January 22, 2022 Popularity 1/10 Helpfulness 1/10

answer reactjs ES6 class event listeners in jsx

reactjs ES6 class event listeners in jsx

Comment

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(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

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

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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: reactjs.org

Tags: es6-class javascript jsx reactjs

Link to this answer
Share Copy Link

Contributed on Jan 22 2022

Innocent Iguana

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

reactjs ES6 class event listeners in jsx

Contents

More Related Answers

reactjs ES6 class event listeners in jsx

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.