No need to write change handlers for multiple React inputs!

#react #typescript #webdev #tutorial

No need to write change handlers for multiple React inputs! You can create a function that takes both the prop name and the value as arguments. If using Typescript, use generics to narrow the type of the value based on the prop.

type User = {
  name: string;
  age: number;
  admin: boolean;
};

function App() {
  const [user, setUser] = useState<User>(defaultUser);

  const setUserProp = <P extends keyof User>(prop: P, value: User[P]) => {
    setUser({ ...user, [prop]: value });
  };

  return (
    <div>
      <input
        onChange={e => {
          setUserProp("name", e.target.value);
        }}
      ></input>
      <input
        onChange={e => {
          setUserProp("age", parseInt(e.target.value));
        }}
      ></input>
      <input
        onChange={() => {
          setUserProp("admin", !user.admin);
        }}
      ></input>
    </div>
  );
}

export default App;

Top comments (6)

Sam Anderson • Mar 17 '20 • Edited

I often further simplify this by giving the <input> elements a name property & then using the following

const changeHandler = (e) => {
   const {name, value} = e.currentTarget;
   setState({[name]: value});
}

...
<input name="name" onChange={changeHandler} />
<input name="age" onChange={changeHandler} />
...

Eugene Karataev • Mar 17 '20

For the cases when you don't need current input state for validation, calculation, e.t.c you just can use uncontrolled inputs and read inputs' values via ref.

Nick Scialli (he/him) • Mar 17 '20

Awesome! I do think this will end up with type errors for varied types of object properties (e.g., numbers and booleans)

Sam Anderson • Mar 17 '20

Of course, this was just a minimal example. When I use this properly in my Typescript projects I include typeguards etc. to ensure state types remain consistent.

rosswilliams • Mar 17 '20

const setUserProp = <P extends keyof User>(prop: P, value: User[P]) => ()

Nice use of generics here with keyOf, will use going forward.

Michael De Abreu • Mar 17 '20

That's so simple, so useful. Thanks!

DEV Community

No need to write change handlers for multiple React inputs!

Top comments (6)

Read next

🥇The first framework that lets you visualize your React/NodeJS app 🤯

10 VS Code extensions for maximum frontend development productivity

Jest and Vite: Cannot use `import.meta` outside a module

I Said Goodbye to ChatGPT and Hello to Llama 3 on Open WebUI - You Should Too