reactjs - How do you change the switch label when the state changes in Material UI?

Question

I am using Material UI's switch. When the switch is on I'd like the label to say "Switch is ON" and when the switch is off I'd like the label to read "Switch is OFF". I am new to state and so would appreciate some help with achieving this!

Here is my code:

import React from 'react';
import Switch from '@material-ui/core/Switch';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';

export default function SwitchesSize() {
  const [checked, setChecked] = React.useState(false);

  const toggleChecked = () => {
    setChecked((prev) => !prev);
  };

  return (
    <FormGroup>
      <FormControlLabel
        control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
        label="Switch is off"
      />
    </FormGroup>
  );
}

Many thanks for your help :)

Katie

Answer 1

You can use ternary operator with template literal string to label the switch:-

label={`Switch is ${checked? 'ON':'OFF'}`}

codesandbox:- https://codesandbox.io/s/thirsty-cache-4unxy