JS rename an object key, while preserving its position in the object

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.

1. Reduce the array of keys
2. use a reducer which checks for a key change, and change it if necessary.
3. add the key to the object with the value

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

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;
};