Tenho um componente que renderiza uma checkbox do estilo Switch do Material-ui. O código é este:
import styles from './styles.module.scss';
import { useState } from 'react';
import { handleInputsRelativeIds } from '../../utils';
import utilStyles from '../../../styles/utilStyles.module.scss';
import Switch from '@material-ui/core/Switch';
export default function Checkbox({ head, text, children, checked }) {
const [check, setCheck] = useState(checked)
if (children) {
handleInputsRelativeIds()
}
return (
<div className={styles.field} data-children={children}>
<div className={styles.check_wrap}>
<div className={styles.text}>
{
head ? (
<h3 className={utilStyles.headingXL}>{ head }</h3>
) : (
<></>
)
}
<p>{ text }</p>
</div>
<Switch color="primary" onClick={() => { setCheck(!check)}} defaultChecked={check} />
</div>
</div>
)
}
O problema é que ele retorna um erro ao mudar o estado do input.
Material-UI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized. To suppress this warning opt to use a controlled SwitchBase.
Parece que o problema é que o componente não está sendo controlado com State do React. Mas estou usando o estado check
. Como posso resolver esse erro com componentes funcionais?