I’ve ran into a problem using React that there is a part of my code that only renders when the variable tipo assigned from useState gets a value. In my case the useState only updates the variable tipo if the inspect element from Chrome specifically is open.
import { Outlet, Link } from 'react-router-dom'
import { useForm } from "react-hook-form"
import React, { useState, useEffect } from 'react'
import { Separator } from '@/components/ui/separator'
import { DMA } from '@/hooks/getDatePTBR'
import { Button } from '@/components/ui/button'
import AlertDialogComponent from '@/components/alert-dialog-component.jsx'
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
export default function CadastrarCliente() {
const {
register,
handleSubmit,
setError,
formState: { errors, isSubmitting },
} = useForm()
const onSubmit = async (data) => { //recebe as informações do form
try {
if (tipo === "FISICA") {
data.tipo = "FISICA";
data.cnpj = null;
data.razaosocial = null;
data.responsavel = null;
} else {
data.tipo = "JURIDICA";
data.cpf = null;
data.rg = null;
}
console.log(data);
} catch (err) {
setError("root", {
message: "Erro do backend",
});
}
}
const [tipo, setTipo] = useState(null);
return (
<>
<div className='w-full m-6 mt-10' id='clientes'>
<div className='grid grid-cols-2' id='clientes-header'>
<h3>Cadastrar cliente</h3>
<div className='justify-self-end'><DMA /></div>
</div>
<div className='mb-4 mt-2'><Separator /></div>
<form onSubmit={handleSubmit(onSubmit)} className='grid grid-cols-4 gap-4 items-start'>
<div>
<p>Tipo</p>
<Select>
<SelectTrigger>
<SelectValue placeholder="Selecionar" />
</SelectTrigger>
<SelectContent>
<SelectItem value="fisica" onClick={() => setTipo('FISICA')}>Física</SelectItem>
<SelectItem value="juridica" onClick={() => setTipo('JURIDICA')}>Jurídica</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<p>{tipo === 'FISICA' ? "Nome" : "Nome fantasia"} </p>
<Input {...register("nome", {
required: "Nome é obrigatório",
minLength: { value: 2, message: "Nome precisa ter pelo menos 2 caracteres." }
}
)} type='text'></Input>
{errors.nome && <div className='text-red-500 mt-2'>{errors.nome.message}</div>}
</div>
<div>
<p>Email</p>
<Input {...register("email")} type='email' autoComplete='email'></Input>
{errors.email && <div className='text-red-500 mt-2'>{errors.email.message}</div>}
</div>
<div>
<p>Celular</p>
<Input {...register("cel")} type='text'></Input>
{errors.cel && <div className='text-red-500 mt-2'>{errors.cel.message}</div>}
</div>
{tipo === 'FISICA' && <>
<div>
<p>CPF</p>
<Input {...register("cpf", {
required: "CPF é obrigatório",
minLength: { value: 11, message: "CPF precisa ter 11 caracteres." }
}
)} type='text'></Input>
{errors.cpf && <div className='text-red-500 mt-2'>{errors.cpf.message}</div>}
</div>
<div>
<p>RG</p>
<Input {...register("rg")} type='text'></Input>
{errors.rg && <div className='text-red-500 mt-2'>{errors.rg.message}</div>}
</div>
</>}
{tipo === 'JURIDICA' && <>
<div>
<p>CNPJ</p>
<Input {...register("cnpj", {
required: "CNPJ é obrigatório",
minLength: { value: 14, message: "CNPJ precisa ter 14 caracteres." }
}
)} type='text'></Input>
{errors.cnpj && <div className='text-red-500 mt-2'>{errors.cnpj.message}</div>}
</div>
<div>
<p>Razão social</p>
<Input {...register("razaosocial")} type='text'></Input>
{errors.razaosocial && <div className='text-red-500 mt-2'>{errors.razaosocial.message}</div>}
</div>
<div>
<p>Responsável</p>
<Input {...register("responsavel")} type='text'></Input>
{errors.responsavel && <div className='text-red-500 mt-2'>{errors.responsavel.message}</div>}
</div>
</>}
<div>
<p>CEP</p>
<Input {...register("cep", {
minLength: { value: 8, message: "CEP precisa ter 8 caracteres." }
}
)} type='text'></Input>
{errors.cep && <div className='text-red-500 mt-2'>{errors.cep.message}</div>}
</div>
<div>
<p>Número</p>
<Input {...register("numero")} type='text'></Input>
{errors.numero && <div className='text-red-500 mt-2'>{errors.numero.message}</div>}
</div>
<div>
<p>Complemento</p>
<Input {...register("complemento")} type='text'></Input>
{errors.complemento && <div className='text-red-500 mt-2'>{errors.complemento.message}</div>}
</div>
<div>
<p>Bairro</p>
<Input {...register("bairro")} type='text'></Input>
{errors.bairro && <div className='text-red-500 mt-2'>{errors.bairro.message}</div>}
</div>
<div>
<p>Cidade/UF</p>
<Input {...register("cidade")} type='text'></Input>
{errors.cidade && <div className='text-red-500 mt-2'>{errors.cidade.message}</div>}
</div>
<p>{tipo}</p>
<div className='grid grid-cols-2 gap-4 col-span-2 self-end '>
<Link to='/dashboard/clientes/'>
<Button variant='outline' className='w-full' href='/dashboard/clientes/'>Voltar</Button>
</Link>
<Button disabled={isSubmitting} type='submit'>
{isSubmitting ? "Cadastrando..." : "Cadastrar"}
</Button>
</div>
{errors.root && (
<AlertDialogComponent
tipo='warning'
title='Erro!'
desc={errors.root.message}
onClose={() => setError('root', null)}
/>)}
</form>
</div>
<Outlet />
</>
)
}
At the end I am rendering the tipo variable to see if it changes without opening the console and as expected, it only renders/change its value if I am with inspect element open on Chrome.
I tried using this page on Firefox but didn’t work and I really don’t know what else to do.
New contributor
Diogo Carvalho Viegas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
I found the problem. It is with the ShadcnUI lib. The element works in different ways that I don’t have the explanation. But making a Button that changes the value “tipo” works normally.
New contributor
Diogo Carvalho Viegas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.