score:1

Accepted answer

you can do it using computed properties.
first add a name property to each of your input, with values "username", "password", "email", then:

onchange={e => setcontact(contact => ({...contact, [e.target.name]: e.target.value}))}

edit: in react versions before 17, events are pooled and setcontact update function is running asynchronously, so the event needs to be persisted this way:

onchange={e => {
  e.persist();
  setcontact(contact => ({...contact, [e.target.name]: e.target.value}));
}}

score:1

your handler could refer to the input name which you could then use to update the form object. there's a couple of issues with your syntax for this on the stackblitz - i.e the state object should be an object, not an array, so here's a full example:

const app = () => {
  interface iform {
    username: string;
    password: string;
    email: string;
  }

  const [form, setformvalue] = usestate<iform>({
    username: "",
    password: "",
    email: ""
  });

  const updateform = (
    formkey: keyof iform,
    event: react.changeevent<htmlinputelement>
  ) => {
    const { value } = event.target;

    setformvalue({
      ...form,
      [formkey]: value
    });
  };

  const handelsubmit = () => {
    console.log("form submitted! values: ", form);
  };

  return (
    <div>
      <form onsubmit={handelsubmit}>
        <div>
          <input
            type="text"
            placeholder="username"
            value={form.username}
            onchange={e => updateform("username", e)}
          />
        </div>
        <div>
          <input
            type="password"
            placeholder="password"
            value={form.password}
            onchange={e => updateform("password", e)}
          />
        </div>
        <div>
          <input
            type="email"
            placeholder="email"
            value={form.email}
            onchange={e => updateform("email", e)}
          />
        </div>
        <input classname="submit" type="submit" value="submit" />
      </form>
    </div>
  );
};

score:1

you can create a object in the state and update the state with cloned object.

here you go, code with results as you expect:

import react, { usestate } from "react";
import { render } from "react-dom";

import './style.css'

const app = () => {
  interface ifrom {
    username: string;
    password: string;
    email: string;
  }

  const [contact, setcontact] = usestate<ifrom[]>({
    username:"",
    email:"",
    password:"",
  });

  console.log(contact)

  const handelsubmit = () => 
  {

    axios.post(contact) //example

  };

  return (
    <div>
      <form onsubmit={handelsubmit}>
        <div>
          <input
            type="text"
            placeholder="username"
            value={contact.usename}
            onchange={e => setcontact({...contact, username: e.target.value})}
          />
        </div>
        <div>
          <input
            type="password"
            placeholder="password"
            onchange={e => setcontact({...contact, password: e.target.value})}
          />
        </div>
        <div>
          <input
            type="email"
            placeholder="email"
            onchange={e => setcontact({...contact, email: e.target.value})}
          />
        </div>
        <input classname='submit' type="submi" value='submit'/>
      </form>
    </div>
  );
};

render(<app />, document.getelementbyid("root"));

Related Query

More Query from same tag