I am trying to build a toggle widget. This is the code I am trying to execute. Here, I am facing one issue if the toggle is in the true state it is toggling to the false state properly. But when it is the false state it is not toggling. I am new to this react js. Could anyone please help me to solve this issue? Thanks in Advance.

import { Component, createElement } from "react";
import { CheckboxToggle } from "react-rainbow-components";

export default class SwitchExample extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        const { booleanAttribute } = this.props;
        booleanAttribute.setValue(!event.target.value);
    }

    render() {
        const { booleanAttribute } = this.props;
        return <CheckboxToggle value={booleanAttribute.value} onClick={this.handleChange} />;
    }
}

CodePudding user response：

You no need to get value from e.target.value instead you can use callback to update state as:

codesandbox demo

  handleChange(event) {
    const { booleanAttribute } = this.props;
    booleanAttribute.setValue((value) => !value);
  }