Cuando escribo en el primer input, selecciono una materia de las opciones que puse y presiono el botón submit va bien el proyecto y renderiza un componente llamado Test pero si escribo otro valor en el input o selecciono otro valor del select sin presionar el boton submit vuelve a renderizar el componente . El componente solo es esto: export default function Test() { console.log('Hola') return ( Hola ) }
Esta parte es donde se maneja la lógica para mostrar el componente y guardar los datos
export default function ContainerNotes() {
const [generalData, setGeneralData]=useState([])
const [results, setResults]=useState(false)
const [formData, setFormData] = useState({
dniStudent:'',
subjectStudent:0,
gradeStudent:''
})
const handleSubmit = (e) => {
e.preventDefault();
if(formData.dniStudent !==''){
setGeneralData([formData])
setResults(true)
}else{
setGeneralData([])
setResults(false)
alert('Debes ingresar una cédula')
}
}
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
})
};
Parte del formulario principalmente
return (
<div>
<div className='flex gap-3 justify-center items-center'>
<p className='text-lg'>Buscar estudiante:</p>
<form onSubmit={handleSubmit} autoComplete='False' className='flex gap-3'>
<input
type='text'
placeholder='Cédula del estudiante'
className="w-full px-4 py-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
name='dniStudent'
value={formData.dniStudent}
onChange={handleChange}
/>
<select className='rounded' name='subjectStudent' value={formData.subjectStudent} onChange={handleChange}>
<option value={0}>Selecciona una materia</option>
<option value={1}>Matemáticas</option>
<option value={2}>Español</option>
<option value={3}>Ciencias Naturales</option>
<option value={4}>Historia</option>
<option value={5}>Geografía</option>
<option value={6}>Ingles</option>
</select>
<input
type='number'
placeholder='Grado'
className="w-full px-4 py-1 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500"
name='gradeStudent'
value={formData.gradeStudent}
onChange={handleChange}
disabled
/>
<button type='submit' className='bg-gray-300 px-6 rounded'>Buscar</button>
</form>
</div>
Sección donde se renderiza el componente
<div className={`w-full bg-white mt-5 rounded ${results? 'hidden':'block'}`}>
<p className='text-center py-16 text-neutral-500 shadow'>Busca estudiante por su cédula, estudiantes por materia o estudiantes por grado en los campos superiores</p>
</div>
{results &&
<div className={`w-full bg-white mt-5 rounded`}>
<Test/>
</div>
}
</div>
)
}