How to set multiple values to state in react hooks

Question

My Code Snippet is below:

        <TextInput 
           type="number"
           id="qty"
           defaultValue={qty}
           onChange={checkValue}
           useRef={qty}
        />

        const checkValue= (err) => {     
            err.preventDefault();
            setState({[Id]:Number(err.currentTarget.value)});
        };

        <Button
          type="submit"
          onClick={onSubmit}
         >
               Update
        </Button>

        const onSubmit = err => {
            err.preventDefault();
            const items = Items.map(p =>({
                id:p.id
                quantity:state[p.id]?state[p.id]:p.qty
              }));
               list.updateList(items,id);
        };

I have to update the multiple Products Quantity,but with the above code able to to change only one of the product,if the change both the products quantity only 2nd product quantity is getting changed,how to change both the products quantity.if i give only p.qty then even if i change only one product ,both the products updated with same value.Please help on this

you can use [an object in react state](https://stackoverflow.com/a/43639228/11667949) — Shivam Jha, May 12 '21 at 15:03

score 0 · Answer 1 · answered May 13 '21 at 06:43

Set an empty object by default in useState hook:

import React, {useState} from 'react';

const MyComponent = (props) => {
  const [values, setValues] = useState({});
  const setSingleValue = (key, value) => setValues({...values, [key]: value});
  . . .

  return (
    . . .
    <TextInput onChange={e => setSingleValue('value-name', e.currentTarget.value)} . . . />
    . . .
  );
}

How to set multiple values to state in react hooks

1 Answers1