Codiga Code Snippet: State Management

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>
    );
  }
}

State Management

yashvi2001

In the code, there is a class called Toggle and within that class, there is a method called handleClick. This method is responsible for setting the state of the Toggle component to either ON or OFF depending on the current state of the Toggle component.

When the button is clicked, the handleClick method is invoked. This method sets the state of the Toggle component to the inverse of the previous state, which in this case is set to !prevState. This reverses the toggles so that the button now says OFF instead of ON.

0 Comments

Add Comment