controlling form input in react code example

Example 1: input text react 2020

function LoginForm() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    api.login(email, password);
  }
  return (
    <form onSubmit={handleSubmit}>
      <div>
      <label htmlFor="email">Email</label>
      <input
        type="email"
        id="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      </div>
      <div>
      <label htmlFor="password">Password</label>
      <input
        type="password"
        id="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      </div>
    </form>
  );
}

Example 2: setting state value with variable value for non form control

set custom state for non form control which will passed on submit and retrieved part of this.state on submit 
{this.state.SInstName = srepoSelect.instname}