Update specific object property value in an array of objects while using inline function

Question

My goal is to update the price field for an individual object.

Here is my selectedCurrenciesArray:

const [selectedSwapCurrencies, setSelectedSwapCurrencies] = useState([
     {
       symbol: null,
       logo: null,
       price: 0
     },
     {
       symbol: null,
       logo: null,
       price: 0
     },
  
  ]);

I'm mapping through an Input component like so...

 {Object.values(selectedSwapCurrencies).map((currency, index) => {

return (
 <Input
     onChange={(e) => setSelectedSwapCurrencies({
               ...selectedSwapCurrencies,
               [selectedSwapCurrencies[index].price]: e.target.value,
                        })


/>
)
})}
 

However, each time I update the input, it deletes the first object in the array entirely.

Answer 1

Try this (not tested)

selectedSwapCurrencies.map((currncy,index)=>{
    return (
 <Input
     onChange={(e) => setSelectedSwapCurrencies({
               ...selectedSwapCurrencies,
               [selectedSwapCurrencies[index].price]: e.target.value,
                        })


/>
)
})