Changing Object keys & values and preserving the initial order

Question

Given the state object below

{
  colour: ['red', 'blue', 'green'],
  size: ['small', 'medium', 'large'],
  position: ['bottom', 'top', 'left', 'right'],
}

I need to be able to change/update its attribute values attrValues as well as the attribute keys attrKey

I'm using the following logic to do so:

setAttributes((prevState) => {
  const key = Object.keys(attributeToUpdate)[0];
  if (key !== attrKey) {
    delete prevState[key];
  }
  return { ...prevState, [attrKey]: attrValue };
});

If I change the attribute key for colour to color it works but the resulting state change to:

{
  size: ['small', 'medium', 'large'],
  position: ['bottom', 'top', 'left', 'right'],
  color: ['red', 'blue', 'green'],
}

Moving the color attribute to the end, I would like to keep it in its original position.

Any help or pointers will be much appreciated.

Answer 1

Though one should take into account the expressed concerns about key insertion order / precedence the solution the OP is looking for might come close to something like the next provided code ...

function renamePropertyAndKeepKeyPrecedence(obj, [oldKey, newKey]) {
  const descriptors = Object.getOwnPropertyDescriptors(obj);
  if (descriptors.hasOwnProperty(oldKey)) {
    Object
      .entries(descriptors)
      .reduce((target, [key, descriptor]) => {

        // delete every property.
        Reflect.deleteProperty(target, key);

        if (key === oldKey) {
          // rename addressed key.
          key = newKey;
        }
        // reassign every property.
        Reflect.defineProperty(target, key, descriptor)

        return target;

      }, obj);
  }
  return obj;
}

const sample = {
  position: ['bottom', 'top', 'left', 'right'],
  colour: ['red', 'blue', 'green'],
  size: ['small', 'medium', 'large'],
};
console.log('before property renaming ...', { sample });

renamePropertyAndKeepKeyPrecedence(sample, ['colour', 'color']);
console.log('after property renaming ...', { sample });

.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer 2

You cannot control the order of keys in a n object - if order is important you should have an array of objects. Then you can rebuild the state having removed the item you want to and replace it.

The demo below shows this in practice:

let prevState = [
  {key:"colour",values: ['red', 'blue', 'green']},
  {key:"size", values:['small', 'medium', 'large']},
  {key:"position",values:['bottom', 'top', 'left', 'right']}
]

const indexToRemove = prevState.findIndex(x => x.key == "colour");

prevState = [
  ...prevState.slice(0,indexToRemove),
  {key:"color", values:['red', 'blue', 'green']},
  ...prevState.slice(indexToRemove+1)
]
console.log(prevState)

So if I understand your code the correction would be

setAttributes((prevState) => {
  const key = Object.keys(attributeToUpdate)[0];
  const indexToRemove = prevState.findIndex(x => x.key == key);

  return [
    ...prevState.slice(0,indexToRemove),
    {key:attrKey, values:attrValue},
    ...prevState.slice(indexToRemove+1)
  ]
});

And you'd have to update the rest of your code to use an array of state rather than an object.