I recently had to refactor a React Form when working with multiple inputs and I thought I'd share how I did it.
This is how my form looks like:
The Problem
- Look at the starter code below
- This
Formcomponent has 5 input fields in total; 5 different states and 5 differentonChangeinline functions - This is not exactly DRY code 🙀
import React, { useState } from "react";
export default function Form() {
const [newCompany, setCompany] = useState("");
const [newPosition, setPosition] = useState("");
const [newLink, setNewLink] = useState("");
const [newDate, setNewDate] = useState("");
const [newNote, setNewNote] = useState("");
return (
<form>
<input
value={newCompany}
onChange={(e) => setCompany(e.target.value)}
label="Company"
/>
<input
value={newPosition}
onChange={(e) => setPosition(e.target.value)}
label="Job Title"
/>
<input
value={newLink}
onChange={(e) => setNewLink(e.target.value)}
label="Job Link"
/>
<input
type="date"
value={newDate}
onChange={(e) => setNewDate(e.target.value)}
/>
<input
value={newNote}
onChange={(e) => setNewNote(e.target.value)}
label="Note"
/>
<button type="submit"> Submit </button>
</form>
);
}
- Also, if I want to add a
resetfunction later, my code will look like this: 🙅🏽♀️
const reset = () => {
setCompany("");
setPosition("");
setNewLink("");
setNewDate("");
setNewNote("");
};
The Solution: Refactoring ✨
Step 1: Add input default values and initialize state
- First, let's add default values to ALL input fields
- How do we do that? We create an object literal with those values and set to empty string
- Then, with the
useState()React Hook we initialize ourvaluesstate with theinitialValuesobject -
Important: Remember to add the
valueattribute to every input field with its corresponding value (e.g.values={values.company})
const initialValues = {
company: "",
position: "",
link: "",
date: "",
note: "",
};
export default function Form() {
const [values, setValues] = useState(initialValues);
return (
<form>
<input
value={values.company}
onChange={(e) => setCompany(e.target.value)}
label="Company"
/>
//...
Step 2: Handle multiple input change
- The goal here is to handle ALL inputs with a single
onChangehandler - In order to update and keep track of our input fields every time they change, we need to create a
handleInputChangefunction (see below) - What's happening here? (quick recap)
- First, we're using object destructuring to get or extract the
nameand thevalueattributes from our inputs (look at the the comments below - they're equivalent) - Then, we're updating our
valuesstate object with the existing values by using thesetValues()function and the spread operator - And finally, we're updating the
valueof the event that was triggered by thatonChangewith this ES6 syntax:[name]: value - This is a very important step!
We need to add a
nameattribute to our inputs and[name]: valuehere means that we're setting a dynamicnameproperty key (taken from our inputs - e.g.company: e.target.value) which will be equal to thevalueof our current input state.
- First, we're using object destructuring to get or extract the
Reference: React Docs
//...
const handleInputChange = (e) => {
//const name = e.target.name
//const value = e.target.value
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
};
return (
<form>
<input
value={values.company}
onChange={handleInputChange}
name="company" //IMPORTANT
label="Company"
/>
// ...
Step 3: Add handleInputChange to input fields
- Add the
handleInputChangefunction to theonChangeprop of every input field - Look at the final code; this is a much cleaner and manageable form 👌🏽
import React, { useState } from "react";
const initialValues = {
company: "",
position: "",
link: "",
date: "",
note: "",
};
export default function Form() {
const [values, setValues] = useState(initialValues);
const handleInputChange = (e) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
};
return (
<form>
<input
value={values.company}
onChange={handleInputChange}
name="company"
label="Company"
/>
<input
value={values.position}
onChange={handleInputChange}
name="position"
label="Job Title"
/>
// ... Rest of the input fields
<button type="submit"> Submit </button>
</form>
);
}
I hope it was useful. All comments and feedback are welcome! 🎊
Discussion (18)
Amazing perofrmance. Very thanks!
Hi this method works fine for multiple input but just with normal input fields. What if their are some booleans and arrays??? E.g In vue.js I have the following data model which change at some point in time, which in that case two way data binding make it way easier for us.
Hi, just wanted to ask ,
since we are changing the state in handleInputChange
therefore, every time we will type in something the whole component will re-render since the state is changing
so isn't it an expensive approach in respect to performance?
Amazing Deborah ! ☺️☺️
Thanks for providing with an useful information in a synchronize manner ...
Amazing perofrmance. Very thanks!
Thank you so much, I was handling this terrible, but with your handleChange I was able to refactor the entire event! fav*
Wow, that exactly what I was looking for
Thank you
The spread operator has not used the in-class component. and this what I am looking for thanks for the exact answer :)
Really clean.
Can we map the input filed using an array of states. So that we can reduce the code size. Is it possible to do that?
Noice , i like that Deborah
for example if I wanted to insert two value in input how do I go by that
value={values.position} for example onChange=" {(e)=> this.onChangeInput(e)}; { handleChange }; "
Thank you so much!
Thanks for the explanation. Kudos
This is beautiful!
thanks a lot iam actually looking for it thanks again