1

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>
  )
}

1 respuesta 1

0

Sugiero revisar los temas relacionados al ciclo de vida del componente react y componentes controlados.

El select y el input están controlados por react tanto en el evento onChange y en la propiedad value para ambos elementos:

<select 
   className='rounded' 
   name='subjectStudent' 
   value={formData.subjectStudent} 
   onChange={handleChange}>
//...
<input 
   type='number' 
  //demas propiedades
          value={formData.gradeStudent}
          onChange={handleChange}
          disabled
          />

Cada que el usuario cambie de opción en el select o ingrese un caracter en el input, react tiene programado ejecutar un re-render con setFormData:

const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    })
  };

Por lo tanto, todo el componente ContainerNotes y sus componentes leaf/children como Test se re-renderizan.

Ciclo de vida del componente React

Componentes controlados react

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.