1

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?

1 Resposta 1

3

se você observar a documentação de switch do material-ui.

Ele é bem claro informando como deve ser feita essa transição de checked.

  return (
    <Switch
      checked={checked}
      onChange={(e) => { setChecked(e.target.checked) }}
      color="primary"
    />
  )
  • Adicione um onChange e não um onClick

Espero ter ajudado!

1
  • Funcionou. Obrigado pela ajuda! Commented 9/03/2021 às 15:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .