My desired output will look like this

{'3afdrjke3j43kjkjf' : 3 , '8fsdfdsni3ni3dsfa' :2 }

I tried like this but it didn't work

const [productQuantity, setProductQuantity] = useState([]);

    const handleQuantity = (e, id) => {
      setProductQuantity({id : e.target.value}) // this outputs {id : "3"}
    }

Whenever i trigger onchange event the id and and the quantity passed on the the handleQuantity function. Where i want to concat the key value pairs in to the state.

 <Form.Control onChange={(e) => handleQuantity(e, cartProduct._id)} as="select">
  {
   [...Array(cartProduct.quantity)].map((_, index) =>{
      return <option>{index + 1}</option>
    })
   }
 </Form.Control>

Thanks in Advance :)

My desired output will look like this

{'3afdrjke3j43kjkjf' : 3 , '8fsdfdsni3ni3dsfa' :2 }

I tried like this but it didn't work

const [productQuantity, setProductQuantity] = useState([]);

    const handleQuantity = (e, id) => {
      setProductQuantity({id : e.target.value}) // this outputs {id : "3"}
    }

Whenever i trigger onchange event the id and and the quantity passed on the the handleQuantity function. Where i want to concat the key value pairs in to the state.

 <Form.Control onChange={(e) => handleQuantity(e, cartProduct._id)} as="select">
  {
   [...Array(cartProduct.quantity)].map((_, index) =>{
      return <option>{index + 1}</option>
    })
   }
 </Form.Control>

Thanks in Advance :)

• javascript
• arrays
• reactjs
• react-native

• 1 So you want to append new entry each time setProductQuantity triggered? May be try setProductQuantity(productQuantity.concat([{id : e.target.value}])) – Sameer Kumar Jain Commented Sep 26, 2020 at 5:18
• thanks! it is concating to the state but the 'id' should be like this '34784asfdsaf' instead it returns {id :'2'} – Hemanth Commented Sep 26, 2020 at 5:25

3 Answers 3

You should store an object not an array in your state and merge that object with the new one onChange

// start with an empty object
const [productQuantity, setProductQuantity] = useState({});

const handleQuantity = (e, id) => {
  // merge existing state with new [id]: value pair
  setProductQuantity((currentQuantity) => ({
    ...currentQuantity,
    // don't forget the brackets here
    [id]: e.target.value,
  }));
};

To update the current state, pass a function to the setter

setProductQuantity(state => ({
  ...state,
  [ id ]: e.target.value
}))

This updates the existing state with a new property.

You should also initialise your state as an object if this is how you intend on using it

const [ productQuantity, setProductQuantity ] = useState({})

With out running your code I have an idea what the problem might be. You are doing this

• setProductQuantity({id : e.target.value})

You need to set it in the array

• setProductQuantity([id] : e.target.value)