You will often run into situations where you will need to create lots of useState hooks for managing input states.
This particularly happens in the cases where you have a lot of inputs or a multi-step form in ReactJS.
It will look something like this.
import React, { useState } from "react";
interface AppProps {}
const App = (props: AppProps): JSX.Element => {
const [username, setUsername] = useState<string>("");
const [email, setEmail] = useState<string>("");
// Imagine 10 more useState handlers here...
return (
<form>
<input
required
type="text"
name="username"
onChange={(evt: React.ChangeEvent<HTMLInputElement>): void => {
const {
target: { value },
} = evt;
setUsername(value);
}}
value={username}
/>
<input
required
type="email"
name="email"
value={email}
onChange={(evt: React.ChangeEvent<HTMLInputElement>): void => {
const {
target: { value },
} = evt;
setEmail(value);
}}
/>
{/** Add more fields here... */}
</form>
);
};
This is a simple example but shows that one-to-one mapping of inputs and useState handlers can get hard to manage along with adding some repeated code.
One solution to handle this problem is by using a simple Object in javascript.
You can use the name property from the input field names and then create a map of [name]: [value] in the onChange handler of the <form> element.
import React, { useState } from "react";
interface AppProps {}
const App = (props: AppProps): JSX.Element => {
const [changes, setChanges] = useState<>({});
const formOnChange = (e: React.ChangeEvent<HTMLInputEvent>): void => {
const newChanges = JSON.parse(JSON.stringify(changes));
const {
target: { name, value },
} = e;
newChanges[name] = value;
};
return (
<form onChange={formOnChange}>
<input required type="text" name="username" />
<input required type="email" name="email" />
</form>
);
};As you can see, we have replaced the useState handler in the 2nd example. In this method, we are dynamically setting the key-value props in the changes state object.
On each input event, the onChange event handler in the <form> event will trigger and update the changes object.
Leave a Reply