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
– jonrsharpe, Commented Jan 19, 2020 at 20:05
@jonrsharpe how do I call the set methods, inside the individual onChange events. — Melissa Stewart
– Melissa Stewart, Commented Jan 19, 2020 at 20:07

Shotiko Topchishvili · Accepted Answer · 2020-01-20 13:43:17Z

92

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, 2020 at 13:43

answered Jan 19, 2020 at 20:30

Shotiko Topchishvili

2,98314 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mohammad Kermani Over a year ago

I did not realize why [e.target.name] has to be inside []?

Shotiko Topchishvili Over a year ago

This is the way to add object key by variable (e.target.name) name.

Dinis Rodrigues Over a year ago

why should we use the name instead of the id? Convention only?

Shotiko Topchishvili Over a year ago

because ID has to be unique, but multiple elements can have same names.

Dr.jacky Over a year ago

TS7006: Parameter 'e' implicitly has an 'any' type.

Rijo Joy · Accepted Answer · 2021-01-07 08:56:59Z

26

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 7, 2021 at 8:56

Rijo Joy

3854 silver badges6 bronze badges

2 Comments

Thanh Nguyen Over a year ago

This should be safe more than the accepted answer. I have experienced some tricky bugs and this answer solved that problem.

JM217 Over a year ago

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.

confused_ · Accepted Answer · 2021-06-26 08:00:59Z

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>

dbc · Accepted Answer · 2024-05-14 16:02:03Z

to store multiple state in usestate for radio button in antd

 const [allValues, setAllValues ]= useState({
        validate:'',
        required:'',
        labelAlign:'',
        labelFontWeight:''
    })
    const changeHandler = (e, name) => {             
        setAllValues({
          ...allValues,                                
        [name]: e.target.value,          
        });
      };
     <Form.Item
            label="Validation"
            rules={[
              {
                required: true,
              },
            ]}
          >
          <Radio.Group
            onChange={(e) => changeHandler(e, "validate")}
            value={allValues.validate}
            style={{ paddingLeft: "15%" }}
          >
            <Radio value="True">True</Radio>
            <Radio value="False">False</Radio>
          </Radio.Group>
          </Form.Item>

Helly Patel · Accepted Answer · 2024-05-14 18:05:06Z

0

You may refer this (usestate with single object):

const [formData, setFormData] = useState({
    mobile: '',
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  });

  const handleChange = (event) => {
    // Update the state object with the new value
    setFormData({...formData, [event.target.name]: event.target.value });
  };

answered May 14, 2024 at 18:05

Helly Patel

414 bronze badges

Comments

DRD · Accepted Answer · 2025-03-12 01:28:38Z

0

I have run into the same situation many times and have written use-state-multiple package. It allows working with multi-value component state using one useStateMultiple() hook call and one setter function.

For documentation and installation see the repo: https://github.com/aptivator/use-state-multiple.

import {useStateMultiple} from 'use-state-multiple';

export function Component() {
  let [state, patchState] = useStateMultiple();
  let {phone = '', username = '', email = ''} = state;

  /*
    ...
  */

  patchState('username', 'some-user-name');
}

edited Mar 12 at 1:28

answered Mar 12 at 0:53

DRD

5,83318 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related