10-3-Formulario

 

Explicación Detallada del Código ListaDeNombresAvanzada

Este componente es una versión mejorada del anterior que almacena objetos completos en lugar de solo strings, con identificadores únicos. Aquí está el análisis completo:

Estructura General

jsx

Copy

Download

import { useState } from 'react';

function ListaDeNombresAvanzada() {
  // Estados
  const [nombre, setNombre] = useState('');
  const [personas, setPersonas] = useState([]);

  // Manejador del formulario
  const handleSubmit = (e) => {
    e.preventDefault();
    if (nombre.trim() === '') return;
    
    const nuevaPersona = {
      id: Date.now(),
      nombre: nombre
    };
    
    setPersonas([...personas, nuevaPersona]);
    setNombre('');
  };

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

      <h2>Personas registradas:</h2>
      <ul>
        {personas.map((persona) => (
          <li key={persona.id}>{persona.nombre}</li>
        ))}
      </ul>
    </div>
  );
}

Diferencias Clave con la Versión Anterior

1. Almacenamiento de objetos completos en lugar de solo strings

2. Uso de IDs únicos para cada elemento

3. Estructura de datos más escalable (puede añadirse más propiedades fácilmente)

Explicación Paso a Paso

1. Estados del Componente

jsx

Copy

Download

const [nombre, setNombre] = useState(''); // Input actual
const [personas, setPersonas] = useState([]); // Array de objetos persona

• Ahora personas almacena objetos con estructura {id: number, nombre: string}

2. Manejador del Formulario (handleSubmit)

jsx

Copy

Download

const handleSubmit = (e) => {
  e.preventDefault();
  if (nombre.trim() === '') return;
  
  const nuevaPersona = {
    id: Date.now(), // ID único basado en timestamp
    nombre: nombre
  };
  
  setPersonas([...personas, nuevaPersona]);
  setNombre('');
};

• Date.now() genera un número único basado en la marca de tiempo actual

• Creamos un objeto completo en lugar de guardar solo el string

3. Renderizado de la Lista

jsx

Copy

Download

<ul>
  {personas.map((persona) => (
    <li key={persona.id}>{persona.nombre}</li>
  ))}
</ul>

• Ahora usamos persona.id como key (mejor práctica que usar índices)

• Accedemos al nombre con persona.nombre

Beneficios de esta Implementación

1. Identificación única confiable:

   • Date.now() provee un ID único (mejor que usar índices del array)

   • Esto es crucial si necesitamos luego eliminar o actualizar elementos

2. Estructura escalable:

   js

   Copy

   Download

   // Podemos fácilmente añadir más propiedades
   const nuevaPersona = {
     id: Date.now(),
     nombre: nombre,
     edad: 30,
     email: 'ejemplo@mail.com'
   };

3. Mejor rendimiento:

   • React puede optimizar mejor las actualizaciones con keys únicas y estables

Ejemplo de Evolución del Estado

1. Estado inicial:

   js

   Copy

   Download

   nombre: ''
   personas: []

2. Después de agregar "Ana":

   js

   Copy

   Download

   nombre: ''
   personas: [
     { id: 1678901234567, nombre: 'Ana' }
   ]

3. Después de agregar "Carlos":

   js

   Copy

   Download

   nombre: ''
   personas: [
     { id: 1678901234567, nombre: 'Ana' },
     { id: 1678901234600, nombre: 'Carlos' }
   ]

¿Por qué usar Date.now() como ID?

• Ventajas:

  • Simple de implementar

  • Suficientemente único para este caso

  • No requiere dependencias adicionales

• Alternativas comunes:

  • Bibliotecas como uuid para IDs más robustos

  • IDs generados por backend si los datos vienen de una API

Posibles Mejoras

1. Validación mejorada:

   js

   Copy

   Download

   if (nombre.trim() === '' || nombre.length < 2) {
     alert('Nombre debe tener al menos 2 caracteres');
     return;
   }

2. Eliminar personas:

   js

   Copy

   Download

   const eliminarPersona = (id) => {
     setPersonas(personas.filter(persona => persona.id !== id));
   };

3. Editar personas:

   js

   Copy

   Download

   const [editando, setEditando] = useState(null);
   // Lógica para edición...

¿Te gustaría que desarrolle alguna de estas mejoras o que explique algún otro aspecto en particular?