app.tsx

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

interface IState {
  email: string;
  password: string;
}

const defaultState: IState = { email: "", password: "" };

export default function App() {
  const [state, setState] = useState<IState>(defaultState);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // console.log(e.tar)
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };
  const handleSubmit = (e: React.FormEvent) => {
    console.log(state);
    setState(defaultState);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="text"
            name="email"
            value={state.email}
            onChange={handleChange}
          />
        </div>
        <div>
          <label htmlFor="password">password</label>
          <input
            type="password"
            name="password"
            value={state.password}
            onChange={handleChange}
          />
        </div>
        <div>
          <button type="submit"> Login</button>
        </div>
      </form>
    </div>
  );
}