10-5-formulario

 Formulario para Agregar Nombres a un Arreglo

Aquí tienes un ejemplo muy simple usando React con functional components y hooks:

Paso 1: Crear el componente ListaNombres.js

jsx

Copy

Download

import { useState } from 'react';

function ListaNombres() {
  // 1. Estado inicial con 3 nombres
  const [nombres, setNombres] = useState(['Juan', 'María', 'Carlos']);
  const [nuevoNombre, setNuevoNombre] = useState('');

  // 2. Función para agregar un nuevo nombre
  const agregarNombre = (e) => {
    e.preventDefault(); // Evita que se recargue la página
    
    if (nuevoNombre.trim() !== '') {
      // Actualizamos el estado agregando el nuevo nombre
      setNombres([...nombres, nuevoNombre.trim()]);
      setNuevoNombre(''); // Limpiamos el input
    }
  };

  return (
    <div>
      <h1>Lista de Nombres</h1>
      
      {/* Formulario para agregar nombres */}
      <form onSubmit={agregarNombre}>
        <input
          type="text"
          value={nuevoNombre}
          onChange={(e) => setNuevoNombre(e.target.value)}
          placeholder="Escribe un nombre"
          required
        />
        <button type="submit">Agregar</button>
      </form>
      
      {/* Lista de nombres */}
      <ul>
        {nombres.map((nombre, index) => (
          <li key={index}>{nombre}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListaNombres;

Paso 2: Usar el componente en tu aplicación

En tu archivo principal (por ejemplo App.js):

jsx

Copy

Download

import ListaNombres from './ListaNombres';

function App() {
  return (
    <div className="App">
      <ListaNombres />
    </div>
  );
}

export default App;

Explicación paso a paso:

1. Estado inicial: Usamos useState para crear:

   • nombres: El arreglo que contiene los nombres (inicializado con 3 nombres)

   • nuevoNombre: El valor del input para agregar nuevos nombres

2. Función agregarNombre:

   • Se ejecuta al enviar el formulario

   • Evita el comportamiento por defecto del formulario

   • Verifica que el nombre no esté vacío

   • Actualiza el estado agregando el nuevo nombre

   • Limpia el input

3. Renderizado:

   • El formulario con un input controlado (su valor está enlazado al estado)

   • Una lista (ul) que muestra todos los nombres usando map

4. Key en la lista: Usamos el índice como key (en una aplicación real con IDs únicos sería mejor usar esos IDs)

¿Cómo funciona?

1. Cuando escribes en el input, onChange actualiza el estado nuevoNombre

2. Cuando envías el formulario:

   • Se llama a agregarNombre

   • Se agrega el nuevo nombre al arreglo

   • React detecta el cambio de estado y vuelve a renderizar el componente mostrando la lista actualizada

Este ejemplo es muy básico pero contiene los fundamentos de React:

• Estado (useState)

• Renderizado condicional

• Listas y keys

• Formularios controlados

---

ListaNombres.js

jsx

Copy

Download

import { useState } from 'react';

// 1. Definimos los nombres iniciales FUERA del componente
const nombresIniciales = ['Juan', 'María', 'Carlos'];

function ListaNombres() {
  // 2. Usamos el arreglo externo como valor inicial del estado
  const [nombres, setNombres] = useState(nombresIniciales);
  const [nuevoNombre, setNuevoNombre] = useState('');

  const agregarNombre = (e) => {
    e.preventDefault();
    
    if (nuevoNombre.trim() !== '') {
      setNombres([...nombres, nuevoNombre.trim()]);
      setNuevoNombre('');
    }
  };

  return (
    <div>
      <h1>Lista de Nombres</h1>
      
      <form onSubmit={agregarNombre}>
        <input
          type="text"
          value={nuevoNombre}
          onChange={(e) => setNuevoNombre(e.target.value)}
          placeholder="Escribe un nombre"
          required
        />
        <button type="submit">Agregar</button>
      </form>
      
      <ul>
        {nombres.map((nombre, index) => (
          <li key={index}>{nombre}</li>
        ))}
      </ul>
    </div>
  );
}

export default ListaNombres;

App.js (igual que antes)

jsx

Copy

Download

import ListaNombres from './ListaNombres';

function App() {
  return (
    <div className="App">
      <ListaNombres />
    </div>
  );
}

export default App;

¿Qué cambió respecto a la versión anterior?

1. Arreglo externo: Ahora nombresIniciales está definido fuera del componente

   jsx

   Copy

   Download

   const nombresIniciales = ['Juan', 'María', 'Carlos'];

2. Estado inicial: Se usa este arreglo externo para inicializar el estado

   jsx

   Copy

   Download

   const [nombres, setNombres] = useState(nombresIniciales);

Ventajas de este enfoque:

1. Separación de datos y lógica: Los datos iniciales están separados de la lógica del componente

2. Reutilización: Puedes usar el mismo arreglo inicial en otros componentes si es necesario

3. Más claro: Para algunos desarrolladores, esta separación hace el código más legible