Estou com um problema em uma aplicação React. Sempre que eu ativo o onBlur={}
, ocorre o erro TypeError: Cannot read property 'valido' of undefined'
. Como posso resolver?
Código do CadastroClientes.jsx
import React, { useState } from "react";
import "./CadastroClientes.css";
import {
Button,
TextField
} from "@material-ui/core";
function CadastroClientes({ enviarCliente, validarNomeEmpresa, validarNomePonto }) {
const data = ['Ativo', 'Inativo']
const [nomeEmpresa, setNomeEmpresa] = useState("");
const [nomePonto, setNomePonto] = useState("");
const [codigo, setCodigo] = useState("");
const [descricaoSICP, setDescricaoSICP] = useState("");
const [status, setStatus] = useState("Ativo");
const [pais, setPais] = useState("");
const [estado, setEstado] = useState("");
const [cidade, setCidade] = useState("");
const [bairro, setBairro] = useState("");
const [endereco, setEndereco] = useState("");
const [lat, setLat] = useState("");
const [long, setLong] = useState("");
const [erros, setErros] = useState({nomeEmpresa: {valido: true, texto: ""}, nomePonto: {valido: false, texto: ""}, codigo: {valido: true, texto: ""}, descricaoSICP: {valido: true, texto: ""}, estado: {valido: true, texto: ""}, cidade: {valido: true, texto: ""}, bairro: {valido: true, texto: ""}, endereco: {valido: true, texto: ""}, lat: {valido: true, texto: ""}, long: {valido: true, texto: ""}});
return (
<div className="container">
<form
onSubmit={(event) => {
enviarCliente({nomeEmpresa, nomePonto, codigo, descricaoSICP, status, pais, estado, cidade, bairro, endereco, lat, long});
event.preventDefault();
}}
>
<h1>Cadastro de Clientes</h1>
<TextField
value={nomeEmpresa}
onBlur={(event) => {
const ehValido = validarNomeEmpresa(nomeEmpresa);
setErros({nomeEmpresa: ehValido});
}}
onChange={(event) => {
setNomeEmpresa(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="nomeEmpresa"
error={!erros.nomeEmpresa.valido}
helperText={erros.nomeEmpresa.texto}
label='Nome Empresa'
fullWidth
/>
<div className="flex">
<TextField
value={nomePonto}
onBlur={(event) => {
const isValid = validarNomePonto(nomePonto);
setErros({nomePonto: isValid});
}}
onChange={(event) => {
setNomePonto(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="nomePonto"
error={!erros.nomePonto.valido}
helperText={erros.nomePonto.texto}
label="Nome do Ponto"
className="w50"
/>
<TextField
value={codigo}
onChange={(event) => {
setCodigo(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="codigo"
label="Código"
className="w50"
/>
</div>
<TextField
value={descricaoSICP}
onChange={(event) => {
setDescricaoSICP(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="descricaoSICP"
label="Descrição SICP"
fullWidth
/>
<label for="exampleFormControlSelect1">Status</label>
<select value={status} onChange={(event) => {
setStatus(event.target.value)
}} class="form-control" id="exampleFormControlSelect1">
{
data.map(i => (
<option>{i}</option>
))
}
</select>
{/* Localização */}
<h2>Localização</h2>
<TextField
value={pais}
onChange={(event) => {
setPais(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="pais"
label="País"
fullWidth
/>
<div className="flex">
<TextField
value={estado}
onChange={(event) => {
setEstado(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="estado"
label="Estado"
className="w50"
/>
<TextField
value={cidade}
onChange={(event) => {
setCidade(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="cidade"
label="Cidade"
className="w50"
/>
</div>
<TextField
value={bairro}
onChange={(event) => {
setBairro(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="bairro"
label="Bairro"
fullWidth
/>
<TextField
value={endereco}
onChange={(event) => {
setEndereco(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="endereco"
label="Endereço"
fullWidth
/>
<div className="flex">
<TextField
value={lat}
onChange={(event) => {
setLat(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="lat"
label="Latitude"
className="w50"
/>
<TextField
value={long}
onChange={(event) => {
setLong(event.target.value);
}}
color="primary"
variant="outlined"
margin="normal"
id="long"
label="Longitude"
className="w50"
/>
</div>
<Button type="submit" id="buttonCadastro" variant="contained" color="primary">Cadastrar Cliente</Button>
</form>
</div>
);
}
export default CadastroClientes;