8-3Contador con Reset

 

Ejemplo Avanzado: Contador con Reset

jsx

Copy

Download

function ContadorAvanzado() {
  const [contador, setContador] = useState(0);

  const aumentar = () => setContador(prev => prev + 1);
  const disminuir = () => setContador(prev => (prev > 0 ? prev - 1 : 0));
  const reset = () => setContador(0); // Nueva función

  return (
    <div>
      <h2>Contador: {contador}</h2>
      <button onClick={aumentar}>+</button>
      <button onClick={disminuir}>-</button>
      <button onClick={reset}>🔃 Reset</button>
    </div>
  );
}

---

🎯 Conclusión

• useState es esencial para manejar estado en React.

• Cada cambio de estado actualiza la UI automáticamente.

• Puedes usarlo para:

  • ✅ Contadores

  • ✅ Formularios

  • ✅ Toggles (interruptores)

  • ✅ Y mucho más...

¡Ahora practica! Prueba crear un componente que:

• Tenga un botón para "Mostrar/Ocultar" texto.

• Use useState para controlar la visibilidad. 😊
has otro ejemplo con datos de una api utilizando fetch y otro ejemplo enviando un formulario
Ejemplos Prácticos con useState
1. Fetch de Datos de una API
jsx
Copy
Download
import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error('Error al obtener los datos');
        }
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // El array vacío significa que se ejecuta solo al montar el componente

  if (loading) return <p>Cargando usuarios...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Lista de Usuarios</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;
Explicación:
• Usamos 3 estados: users (datos), loading (carga), error (errores)

• useEffect se ejecuta al montar el componente para hacer la petición

• Manejamos los estados de carga y error para mejor UX

• Mostramos la lista de usuarios cuando los datos están disponibles
2. Envío de Formulario
jsx
Copy
Download
import { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState('');

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Validación simple
    if (!formData.name || !formData.email) {
      setError('Nombre y email son requeridos');
      return;
    }

    try {
      // Simulamos el envío a una API
      const response = await fetch('https://api.example.com/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Error al enviar el formulario');
      }

      setSubmitted(true);
      setError('');
    } catch (err) {
      setError(err.message);
    }
  };

  if (submitted) {
    return (
      <div className="success-message">
        <h2>¡Gracias por contactarnos!</h2>
        <p>Hemos recibido tu mensaje y nos pondremos en contacto pronto.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Formulario de Contacto</h2>
      
      {error && <p className="error">{error}</p>}
      
      <div>
        <label>
          Nombre:
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
          />
        </label>
      </div>
      
      <div>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </label>
      </div>
      
      <div>
        <label>
          Mensaje:
          <textarea
            name="message"
            value={formData.message}
            onChange={handleChange}
          />
        </label>
      </div>
      
      <button type="submit">Enviar</button>
    </form>
  );
}

export default ContactForm;
Explicación:
• Usamos un estado formData para manejar todos los campos del formulario

• handleChange actualiza el estado cuando los campos cambian

• handleSubmit valida y envía los datos

• Manejamos estados de envío exitoso (submitted) y errores

• Mostramos mensajes apropiados según el estado
Consejos para ambos ejemplos:
1. Siempre maneja estados de carga y error

2. Usa validación antes de enviar datos

3. Limpia los estados cuando sea necesario

4. Considera usar librerías como axios para peticiones más complejas

5. Para formularios complejos, considera usar Formik o React Hook Form