react-bootstrap form switch button

Question

I can't seem to figure out why I am not able to set the default value for react-bootstrap switch to false (off). It seems the only time the value will change is when I trigger the onChange event handler. Am I missing something? Here is the switch portion in my form:

<Form.Group as={Row} className="mb-3">
  <Col sm={10}>
    <Form.Check
      type="switch"
      id="custom-switch"
      label="Enable GTC"
      defaultChecked="false"
      onChange={(e) => setField('gtc', e.target.checked)}
    />
  </Col>
</Form.Group>

Here is how I am handling the state for the form.

  const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value,
    });
  };

I would think `defaultChecked="false" would do the trick but it does not.

Thanks!

Answer 1

Remove defaultChecked="false" . By having it as a prop, defaultChecked is set to true.

Answer 2

const [switchState, setSwitchState] = useState(false);

then assign the:

defaultChecked={switchState}

Now write change handler function

const handleChange=(e)=>{
   setField('gtc', e.target.checked)
   setSwitchState(!switchState)
    
}

final code:

<Form.Group as={Row} className="mb-3">
  <Col sm={10}>
    <Form.Check
      type="switch"
      id="custom-switch"
      label="Enable GTC"
      defaultChecked={switchState}
      onChange={handleChange}
    />
  </Col>
</Form.Group>