CODEWITHSUNDEEP
javascriptreactjsobjectdata-structures
Freddy.
Freddy.

Reputation: 1745

How to spread nested properties in Object?

I have this object below. I was wondering how I can select a specific item and update a property. For example. Item 1 I want to add a task in the array.

item: {
  'item-1': {
    id: 'item-1',
    title: 'To do',
    task: ['task-1', 'task-2', 'task-3', 'task-4']
  },
  'item-2': {
    id: 'item-2',
    title: 'In progress',
    task: []
  },

I currently have

const getItem = {...state.items['item-1']}
const newTaskList = [...getItem.task, newTask.id]

const newState = {
      ...state,
      items: {
        ...state.items,
        //How do I spread new array correctly in item 1?
        //...state.items['item-1'].task
      }
    };

Upvotes: 1

Views: 192

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074475

Assuming the starting point:

let state = {
    items: {
      'item-1': {
        id: 'item-1',
        title: 'To do',
        task: ['task-1', 'task-2', 'task-3', 'task-4']
      },
      'item-2': {
        id: 'item-2',
        title: 'In progress',
        task: []
      },
    }
};

If you want to add a task to item-1's task array without modifying things in place (which is important in React state), you have to copy state, items, item-1, and item-1's task:

let newState = {
    ...state,
    items: {
        ...state.items,
        'item-1': {
            ...state.items['item-1'],
            task: [...state.items['item-1'].task, newTask]
        }
    }
};

Live Example:

let state = {
    items: {
      'item-1': {
        id: 'item-1',
        title: 'To do',
        task: ['task-1', 'task-2', 'task-3', 'task-4']
      },
      'item-2': {
        id: 'item-2',
        title: 'In progress',
        task: []
      },
    }
};

let newTask = "task-4";

let newState = {
    ...state,
    items: {
        ...state.items,
        'item-1': {
            ...state.items['item-1'],
            task: [...state.items['item-1'].task, newTask]
        }
    }
};

console.log(newState);

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281734

You need to use the object key i.e item-1 and clone the properties for it and add the new list for the task key. In short you need to clone at each level of the object before overriding the key that you wish to update

const newState = {
  ...state,
  items: {
    ...state.items,
    'item-1': {
         ...state.items['item-1'],
         task: newTaskList
     }
  }
};

Upvotes: 1

HMR
HMR

Reputation: 39270

In lodadash you can get and set nested object from an object, here is my own implementation of it:

//helper to get prop from object
const get = (object, path, defaultValue) => {
  const recur = (object, path) => {
    if (object === undefined) {
      return defaultValue;
    }
    if (path.length === 0) {
      return object;
    }
    return recur(object[path[0]], path.slice(1));
  };
  return recur(object, path);
};
//helper to set nested prop in object
const set = (
  state,
  statePath,
  modifier
) => {
  const recur = (result, path) => {
    const key = path[0];
    if (path.length === 0) {
      return modifier(get(state, statePath));
    }
    return Array.isArray(result)
      ? result.map((item, index) =>
          index === Number(key)
            ? recur(item, path.slice(1))
            : item
        )
      : {
          ...result,
          [key]: recur(result[key], path.slice(1)),
        };
  };
  const newState = recur(state, statePath);
  return get(state, statePath) === get(newState, statePath)
    ? state
    : newState;
};

let state = {
  items: {
    'item-1': {
      id: 'item-1',
      title: 'To do',
      task: ['task-1', 'task-2', 'task-3', 'task-4'],
    },
    'item-2': {
      id: 'item-2',
      title: 'In progress',
      task: [],
    },
  },
};
console.log(
  set(
    state,
    ['items','item-1','task'],
    (tasks)=>tasks.concat('new task')
  )
);

You can put the get and set in a library and it would make setting deeply nested values easier on the eyes of future readers of your code.

Upvotes: -1

Related Questions