Show/ Hide a div according to toggle Switch on/off

Question

I want to display/hide the chat body when on/off the switch. That means when switch on I want to display the chat body and when to switch off I want to hide it. Below is an image of toggle switch that I have used. Can you give me help to do that?

class MyApp extends Component {

render() { 
    return ( 
  
       <FormControlLabel
                  control=
                  {
                    <Switch
                      name="sector"
                      color="primary"
                      style={{paddingRight: "30px"}}
                      onClick={this.handleClick.bind(this)}
                    />
                  }
                  label="Sector 1"
         /> 

         <div className="chatBody">
                This is my chat body
         </div>
    );
  }
}
export default MyApp;

Answer 1

You can show/hide the div content using the React state handlers, your code then could look like this:

class MyApp extends Component {

constructor(props) {
    super(props);
    this.state = {showBody: false};
    this.handleClick = this.handleClick.bind(this);
}

handleClick () {
  // toggle the showBody state to hide and show the body
  this.setState({ showBody: !this.state.showBody })
}

render() { 
    return ( 
  
       <FormControlLabel
                  control=
                  {
                    <Switch
                      name="sector"
                      color="primary"
                      style={{paddingRight: "30px"}}
                      onClick={this.handleClick}
                    />
                  }
                  label="Sector 1"
         /> 

         {this.state.showBody && (
           <div className="chatBody">
                This is my chat body
           </div>
         )}
    );
  }
}
export default MyApp;

As you can see on the this.state.showBody && we are declaring that the body should only display if the showBody state is true.

Then in some scenarios for "controlled inputs" there is probably a property in your Switch for the "checked" state (it usually depends on the library) and then you can use the state in the Switch to a controlled value: checked={this.state.showBody}.

Answer 2

Just add a state to control this:

class MyApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked1: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    this.setState({
      checked1: e.target.checked,
    });
  }
  render() {
    return (
      <>
        <FormControlLabel
          control={
            <Switch
              checked={this.state.checked1}
              name="sector"
              color="primary"
              style={{ paddingRight: "30px" }}
              onClick={this.handleClick.bind(this)}
            />
          }
          label="Sector 1"
        />

        {this.state.checked1 && <div className="chatBody">This is my chat body</div>}
      </>
    );
  }
}
export default MyApp;