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!
Remove defaultChecked="false". By having it as a prop, defaultChecked is set to true.
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>