10-2-formulario

 

Explicación Detallada del Código ListaDeNombres

Este componente React permite agregar nombres a una lista y mostrarlos. Vamos a analizarlo parte por parte:

Estructura General

jsx

Copy

Download

import { useState } from 'react';

function ListaDeNombres() {
  // Estados
  const [nombre, setNombre] = useState('');
  const [nombres, setNombres] = useState([]);

  // Manejador del formulario
  const handleSubmit = (e) => {
    e.preventDefault();
    if (nombre.trim() === '') return;
    
    setNombres([...nombres, nombre]);
    setNombre('');
  };

  // Renderizado
  return (
    <div>
      {/* Formulario para agregar nombres */}
      <form onSubmit={handleSubmit}>
        {/* Input controlado */}
        <label>
          Nombre:
          <input 
            type="text" 
            value={nombre}
            onChange={(e) => setNombre(e.target.value)}
          />
        </label>
        <button type="submit">Agregar</button>
      </form>

      {/* Lista de nombres */}
      <h2>Nombres guardados:</h2>
      <ul>
        {nombres.map((nombre, index) => (
          <li key={index}>{nombre}</li>
        ))}
      </ul>
    </div>
  );
}

Explicación Paso a Paso

1. Estados del Componente

jsx

Copy

Download

const [nombre, setNombre] = useState(''); // Almacena el nombre actual del input
const [nombres, setNombres] = useState([]); // Almacena la lista de todos los nombres

• nombre: Guarda el valor temporal del input (string)

• nombres: Guarda un array con todos los nombres agregados

2. Manejador del Formulario (handleSubmit)

jsx

Copy

Download

const handleSubmit = (e) => {
  e.preventDefault(); // Evita recarga de página
  if (nombre.trim() === '') return; // Validación
  
  setNombres([...nombres, nombre]); // Agrega nuevo nombre
  setNombre(''); // Limpia el input
};

• e.preventDefault(): Detiene el comportamiento por defecto del formulario

• nombre.trim() === '': Verifica si el input está vacío o solo tiene espacios

• [...nombres, nombre]: Crea un nuevo array con los nombres existentes más el nuevo

• setNombre(''): Limpia el input después de agregar

3. Renderizado del Formulario

jsx

Copy

Download

<form onSubmit={handleSubmit}>
  <label>
    Nombre:
    <input 
      type="text" 
      value={nombre}
      onChange={(e) => setNombre(e.target.value)}
    />
  </label>
  <button type="submit">Agregar</button>
</form>

• value={nombre}: El input muestra el valor del estado nombre

• onChange: Actualiza el estado nombre con cada tecla presionada

4. Renderizado de la Lista

jsx

Copy

Download

<h2>Nombres guardados:</h2>
<ul>
  {nombres.map((nombre, index) => (
    <li key={index}>{nombre}</li>
  ))}
</ul>

• nombres.map(): Convierte el array de nombres en elementos <li>

• key={index}: React necesita una clave única para cada elemento de lista

Flujo Completo del Componente

1. Inicialización:

   • El input aparece vacío (nombre = '')

   • La lista de nombres está vacía (nombres = [])

2. Cuando el usuario escribe:

   • Cada tecla presionada dispara onChange

   • setNombre(e.target.value) actualiza el estado nombre

3. Cuando el usuario envía el formulario:

   • Se valida que no esté vacío

   • El nombre se agrega al array nombres

   • El input se limpia (setNombre(''))

4. Renderizado de la lista:

   • React detecta el cambio en nombres y vuelve a renderizar

   • La lista muestra todos los nombres agregados

Visualización del Estado

Si agregamos "Ana", luego "Carlos" y luego "María", el estado cambiaría así:

1. Inicial:

   js

   Copy

   Download

   nombre: ''
   nombres: []

2. Después de agregar "Ana":

   js

   Copy

   Download

   nombre: ''
   nombres: ['Ana']

3. Después de agregar "Carlos":

   js

   Copy

   Download

   nombre: ''
   nombres: ['Ana', 'Carlos']

4. Después de agregar "María":

   js

   Copy

   Download

   nombre: ''
   nombres: ['Ana', 'Carlos', 'María']

¿Por qué usar ...nombres?

La línea setNombres([...nombres, nombre]) crea un nuevo array con:

1. Todos los elementos existentes en nombres (usando el operador spread ...)

2. El nuevo nombre al final

Esto es importante porque en React debemos evitar mutar el estado directamente y siempre crear nuevos objetos/arrays cuando actualizamos el estado.

¿Te gustaría que profundice en algún aspecto específico de este código