Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro ao atribuir Boolean

Está dando essa mensagem de aviso, e não consegui identificar a causa da mensagem.

Warning: Received true for a non-boolean attribute erros.

If you want to write it to the DOM, pass a string instead: erros="true" or erros={value.toString()}. at div

import { React, useState } from "react";

import { Button, TextField, Switch, FormGroup, FormControlLabel } from "@material-ui/core/"; function FormularioCadastro({envia}) { const [nome, setNome] = useState(""); const [Sobrenome, setSobrenome] = useState(""); const [cpf, setCpf] = useState(""); const [promocao, setPromocao] = useState(true); const [novidade, setNovidade] = useState(true); const [erros, setErros] = useState({cpf:{valido:true, texto:""}}) return ( <form onSubmit={(event) => { event.preventDefault(); envia({nome, Sobrenome, cpf, novidade, promocao }); } } > <TextField value={nome} onChange={(event) => { setNome(event.target.value); } } id="nome" label="Nome:" variant="outlined" fullWidth margin="normal" /> <TextField value={Sobrenome} onChange={(event) => { setSobrenome(event.target.value); } } id="sobrenome" label="Sobrenome:" variant="outlined" fullWidth margin="normal" /> <TextField value={cpf} onChange={(event) => { setCpf(event.target.value); } } onBlur ={(event)=>{ setErros({cpf:{valido:false,texto:"O CPF deve ter 11 dígitos"}}) }}

            erros = {!erros.cpf.valido}
            helperText={erros.cpf.texto}
            id="cpf" label="CPF:" variant="outlined" fullWidth margin="normal" />
        <FormGroup>
            <FormControlLabel
                checked={promocao}
                label="Promoções" control={<Switch id="promocao" color="primary"
                    onChange={(event) => {
                        setPromocao(event.target.checked);
                    }
                    }
                />} />
            <FormControlLabel
                checked={novidade}
                label="Novidades" control={<Switch id="novidades" color="primary"
                    onChange={(event) => {
                        setNovidade(event.target.checked);
                    }
                    }
                />} />
        </FormGroup>
        <Button type="submit" variant="contained" color="primary">Cadastrar</Button>
    </form>
);

} export default FormularioCadastro;

3 respostas
solução!

Fala Bruno, tudo bem? Espero que sim!

O que acontece é que você passa para o componente TextField, a propriedade erros, sendo que o correto seria error:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Então basta substituir erros por error

Abraços e bons estudos :D

Vlw, Mateus, era isso mesmo.

Que bom que resolveu, qualquer outro problema pode chamar a gente, ta bom?

Abraços e bons estudos :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software