How to update Object in Array dynamically in React state

Question

I'm fairly new to ReactJS and wrote this function I want to use to update an object in my state. It seems unable to use the "name" param to update my object and I don't really get why. I tried to code it in template literals as well.

const handleAccountingChange = (newValue, name, id) => {
  const newState = selected.map((obj) => {
    if (obj.id === id) {
      return { ...obj, name: newValue };
    }
    return obj;
  });
  setSelected(newState);
};

I get no error in the browser console, but it doesn't update my state either. Any idea would be appreciated. I spent 2 hours on google but didn't find anything.

Answer 1

When you call obj.property = 'aaa' you set property to aaa. What you try to do is update the property contained by the variable name, what you code does is update the property name.

To update a property from a variable you need to use :

const property = 'name'
obj[property] = 'aaa'

equivalente to :

obj.name == 'aaa'

This code solves your probleme :

const handleAccountingChange = (newValue, name, id) => {
    // For the exemple I declare selected here
    const selected = [ {id: 1, test: 'aaa'}, {id: 2, test: 'bbb'} ];
    
    const newState = selected.map((obj) => {
        if (obj.id === id) {
            let myObj = {...obj};
            myObj[name] = newValue;
            return myObj;
        }
        return obj;
    });

    return newState; // instead ou can use setSelected(newState)
};



console.log(handleAccountingChange('ccc', 'test', 1));

Answer 2

const handleAccountingChange = (newValue, name, id) => {
const newState = selected.map((obj) => {
if (obj.id === id) {
return { obj[name]= newValue};
}
return obj;
});
setSelected({...newState});
}