My javascript object looks like this:
const someObj = { arr1: ["str1", "str2"], arr2: ["str3", "str4"] } In attempting to rename a key (e.g. arr1), I end up deleting the existing key and writing a new key with the original value. The order of obj changes.
someObj = { arr2: ["str3", "str4"], renamedarr1: ["str1", "str2"] } How do I rename a key while preserving the key order?
In the end it was solved in a js-vanila way rather than a react way.
In case somebody would look for a similar solution, I am posting the code I ended up using. Inspired by Luke's idea:
const renameObjKey = ({oldObj, oldKey, newKey}) => { const keys = Object.keys(oldObj); const newObj = keys.reduce((acc, val)=>{ if(val === oldKey){ acc[newKey] = oldObj[oldKey]; } else { acc[val] = oldObj[val]; } return acc; }, {}); return newObj; }; You might want to consider reducing the array of keys into a new object. To do this, you need also to know which key changed to what.
After that you have a Object with the order you had before, and possibly a changed key is still at the same position
Something like this might work (not tested)
const changedKeyMap = {"previousKey": "newKey"}; const keys = Object.keys(this.state.obj); const content = e.target.value; const result = keys.reduce((acc, val) => { // modify key, if necessary if (!!changedKeyMap[val]) { val = changedKeyMap[val]; } acc[val] = content; // or acc[val] = this.state.obj[val] ? return acc; }, {}); As you can see, you need to keep track of how you changed a key (changedKeyMap). The reduce function just iterates over all keys in correct order and adds them to a newly created object. if a key is changed, you can check it in the changedKeyMap and replace it. It will still be at the correct position
Simple ~1 liner to do this with Object.entries and Object.fromEntries as well.
const renameKey = (obj, oldKey, newKey) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [ key === oldKey ? newKey : key, value ])); 