UI ToggleSwitch state exchange with Wrapper component

ToggleSwitch is a child of the Wrapper component.

ToggleSwitch changes its render view through the render props received from the parent component Wrapper.

The Wrapper component state states it can be either checked or not checked and the text is "On" or "OFF".

this.state = { checked: false, text: 'OFF' }; }

ToggleSwitch has 2 mandatory props: onChange and checked. The state needs to be managed at the upper-level component, and the Wrapper needs to pass these 2 props to the ToggleSwitch.

Wrapper passes the method handleChange(checked) that toggles the state of a parent component as an onChange prop to the ToggleSwitch component as well as the checked state.

handleChange(checked) { this.setState({ checked: !checked}); }

<ToggleSwitch checked = {this.state.checked} onChange = {this.handleChange.bind(this)}>