Clase: Eventos - Ejercicio Formulario

gistfile1.txt

import "./App.css";
import React, { useState } from "react";

function App() {
  const [color, setColor] = useState("#e97878");

  const [user, setUser] = useState("");
  const [passwd, setPasswd] = useState("");
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleLogin = (e) => {
    e.preventDefault();
    setIsSubmitted(true);
    console.log({
      user,
      passwd,
    });
  };

  return (
    <div
      className="App"
      style={{
        backgroundColor: color,
      }}
    >
      {isSubmitted && (
        <p>
          {" "}
          User: {user} y Password: {passwd}{" "}
        </p>
      )}
      <form onSubmit={(e) => handleLogin(e)}>
        <input value={user} onChange={(e) => setUser(e.target.value)} />
        <input
          value={passwd}
          onChange={(e) => setPasswd(e.target.value)}
          type="password"
        />
        <button>Log in</button>
        <button type="button">Cancel</button>
      </form>
    </div>
  );
}

export default App;