Checkbox when clicked does not show text fields. collapse not working - reactjs

Question

I have this checkbox that when clicked doesn't show the text area I want to implement in collapse such that when the checkbox is clicked I want to see the content. the checkbox does not show the content when it's clicked
import React from 'react';
import { Grid, FormControlLabel, Checkbox} from '#mui/material';
import { Collapse } from 'react-collapse';
import { Formik } from 'formik';
import { useFormik } from 'formik';
import MyTextField from './MyTextField';
let defaultInitialIngestObject = {
pushEnabled: true
}
export default function App(props) {
const { initialValues } = props
const formik = useFormik({
initialValues: Boolean(initialValues) ? initialValues : defaultInitialIngestObject,
});
return (
<div>
<Grid item xs={12}>
<Grid item xs={4}>
<FormControlLabel
style={{ margin: 0, padding: 0, marginTop: '8px', verticalAlign: 'top' }}
label="Submit"
id="sub"
control={
< Checkbox size="large"
onClick={(evt) => formik.setFieldValue("sub", evt.target.checked)}
checked={formik.values['sub']}
/>
}
/>
</Grid>
<Collapse in={formik.values.sub}>
<Grid item xs={4}>
<MyTextField
disabled={formik.values.sub}
id="firs"
label="First"
formik={formik}
/>
</Grid>
</Collapse>
</Grid>
</div>
)
}

Answer 1

There are a few things needing adjustment.
First, you are trying to change an uncontrolled input to be controlled
causing this warning in the console
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Let's address the issues.
The reason the warning it's happening is that you are mounting the input with a value of undefined, then later when you click on it you are setting a value of true [checked].
This will cause the error above, so lets predefine the value to be
false [unchecked]
checked={formik.values.sub || false}
Second, according to MUI Checkbox docs, the proper API is not onClick but onChange https://mui.com/material-ui/api/form-control-label/ , so, lets update that
onChange={
(evt) => formik.setFieldValue("sub", evt.target.checked)
}
Third, the property in doesn't seem to be in the API according to the library docs. https://www.npmjs.com/package/react-collapse
I changed it to isOpened and now it works.
<Collapse
// in={formik.values.sub}
isOpened={formik.values.sub}
>
I've created a sandbox here with a working version.
https://codesandbox.io/s/stackoverflow-example-checkbox-expand-8o2wzk?file=/src/App.js
PS. for your next issue, please provide a sandbox to make it easier for other to help out.