How can I store and update multiple values in React useState?

Question

I've a series of user data elements which I'm collecting inside a React component using hooks.

const [mobile, setMobile] = useState('');
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');

Each of these are updated as follows.

<input type="text"
       className="form-control"
       id="mobile"
       placeholder="Enter a valid mobile number"
       onChange={event => {setMobile(event.target.value)}}/>

Is there a more succint way to do this using an object as the variable?

Sure, you could... use an object as the variable. `const [values, setValues] = useState({ mobile: "", ... });`. — jonrsharpe, Jan 19 '20 at 20:05
@jonrsharpe how do I call the set methods, inside the individual `onChange` events. — Melissa Stewart, Jan 19 '20 at 20:07

Shotiko Topchishvili · Accepted Answer · 2020-01-20T13:43:17.410

81

You should add name attributes to input tags. Each name must refer to key in AllValues object.

const [allValues, setAllValues] = useState({
   mobile: '',
   username: '',
   email: '',
   password: '',
   confirmPassword: ''
});
const changeHandler = e => {
   setAllValues({...allValues, [e.target.name]: e.target.value})
}
return (
   <input type="text"
       className="form-control"
       id="mobile"
       name="mobile"
       placeholder="Enter a valid mobile number"
       onChange={changeHandler}
   />
   // ...
)

edited Jan 20 '20 at 13:43

answered Jan 19 '20 at 20:30

Shotiko Topchishvili

2,663
10
20

1

I did not realize why `[e.target.name]` has to be inside `[]`? – Mohammad Kermani Aug 31 '20 at 20:28
11

This is the way to add object key by variable (e.target.name) name. – Shotiko Topchishvili Sep 01 '20 at 08:22
why should we use the name instead of the id? Convention only? – Dinis Rodrigues Apr 19 '21 at 05:32
1

because ID has to be unique, but multiple elements can have same names. – Shotiko Topchishvili May 02 '21 at 19:21
`TS7006: Parameter 'e' implicitly has an 'any' type.` – Dr.jacky Jul 11 '23 at 11:48

score 21 · Answer 2 · answered Jan 07 '21 at 08:56

21

The above answer could create issues in some cases, the following should be the right approach.

const [allValues, setAllValues] = useState({
   mobile: '',
   username: '',
   email: '',
   password: '',
   confirmPassword: ''
});
const changeHandler = e => {
   setAllValues( prevValues => {
   return { ...prevValues,[e.target.name]: e.target.value}
}
}

answered Jan 07 '21 at 08:56

Rijo Joy

335
3
6

1

This should be safe more than the accepted answer. I have experienced some tricky bugs and this answer solved that problem. – Thanh Nguyen Jul 18 '21 at 08:07
For React 16 and earlier, this might cause a problem because of Event Pooling. Be sure to use this only for React 17 or later. Note that you can still use this answer with some additional lines like <_name=e.target.name;_value=e.target.value> and using _name and _value instead of using e directly in the return phrase. – JM217 Aug 28 '21 at 08:34

score 7 · Answer 3 · answered Jun 26 '21 at 08:00

Set initial values

const initialValues = {                   // type all the fields you need
name: '',
email: '',
password: ''
};

UseState

const [values, setValues] = useState(initialValues);       // set initial state

Handling the changes

const handleChange = (e) => {                
  setValues({
    ...values,                                // spreading the unchanged values
    [e.target.name]: e.target.value,          // changing the state of *changed value*
  });
};

Making the Form

<form>
  <input type="email"
   id="xyz"
   name="email"                                     // using name, value, onChange for applying changes
   value={email}
   onChange={changeHandler}
   placeholder="Enter your email"
   />
   // other inputs
</form>

How can I store and update multiple values in React useState?

3 Answers3

Linked