import React, { useState } from 'react';

export default function FormularioRegistro() {
  // 1. Inicializa el estado 'formData' con nombre, email y rol
  const [formData, setFormData] = useState({
    nombre: '',
    email: '',
    rol: 'desarrollador'
  });

  const handleChange = (e) => {
    // 2. Implementa la lógica genérica aquí
  };

  const handleSubmit = (e) => {
    // 3. Evita que la página se recargue y muestra los datos en consola
    alert("Datos enviados: " + JSON.stringify(formData));
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif', maxWidth: '400px' }}>
      <h1>Registro de Usuario</h1>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '10px' }}>
          <label>Nombre:</label>
          <input 
            type="text" 
            name="nombre" 
            style={{ width: '100%' }}
            // 4. Vincula value y onChange
          />
        </div>

        <div style={{ marginBottom: '10px' }}>
          <label>Email:</label>
          <input 
            type="email" 
            name="email" 
            style={{ width: '100%' }}
            // 5. Vincula value y onChange
          />
        </div>

        <div style={{ marginBottom: '10px' }}>
          <label>Rol:</label>
          <select name="rol" style={{ width: '100%' }}>
            <option value="desarrollador">Desarrollador</option>
            <option value="disenador">Diseñador</option>
            <option value="manager">Manager</option>
          </select>
        </div>

        <button type="submit" style={{ width: '100%', padding: '10px', background: '#2563eb', color: 'white', border: 'none', borderRadius: '4px' }}>
          Registrar
        </button>
      </form>

      <div style={{ marginTop: '20px', fontSize: '0.8rem', color: '#666' }}>
        <strong>Vista previa del estado:</strong>
        <pre>{JSON.stringify(formData, null, 2)}</pre>
      </div>
    </div>
  );
}
Terminal
Ready

Waiting for execution...