React-bootstrap switch not displaying - reactjs

Question

I'm trying to incorporate Formik and React-bootstrap.
It's going as expected except the switch component.
Here is my function for rendering the switch:
function ReactSwitch(props){
return(
<>
<Col md={props.col}>
<Form.Group>
<Form.Check
type="switch"
id={props.id}
name={props.name}
label={props.label}
checked={props.checked}
onChange={props.onChange}
/>
</Form.Group>
</Col>
</>
);
}
And here is my initialization for Formik:
const formik = useFormik({
initialValues: {
wflow_switch: false
},
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});
Note that when I change the type from switch to checkbox, it displays a checkbox but still no label. What am I doing wrong? I'm still learning React so any comments are appreciated.

Answer 1

I guess you'll need to use state and enable enablereinitialize
Try this:
export default function FormSwitch() {
// add checked state
const [checked, setChecked] = useState(false)
const { handleSubmit, values } = useFormik({
initialValues: {
// initial value is set 'false' by state
switch: checked
},
// Control whether Formik should reset the form if initialValues changes
enableReinitialize: true,
onSubmit: (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
setSubmitting(false)
}, 400)
}
})
return (
<form className="form" onSubmit={handleSubmit}>
<ReactSwitch
name="switch"
label="Switch"
id="switch"
checked={checked}
onChange={() => setChecked(!checked)}
/>
<button type="submit">
Submit
</button>
</form>
)
}
Edit: Different approach using useField with <Formik>
import { Formik, useField } from "formik"
import { Col, Form } from "react-bootstrap"
const ReactSwitch = ({ ...props }) => {
const [field, form] = useField(props)
return (
<Col md={props.col}>
<Form.Group>
<Form.Check
type="switch"
id={props.id}
checked={field.value.checked}
onChange={() => form.setFieldValue(props.name, !field.value)}
{...field}
{...props}
/>
</Form.Group>
</Col>
)
}
export default function Switch() {
return (
<Formik
initialValues={{
switch: false
}}
onSubmit={values => alert(JSON.stringify(values, null, 2))}
>
{formik => (
<form onSubmit={formik.handleSubmit}>
<ReactSwitch label="Switch" name="switch" id="switch" />
<button type="submit">submit</button>
</form>
)}
</Formik>
)
}