JIYIK CN >

To remove a key from a React state object:

1. Use useStatethe hook to store state objects.
2. Destructure the keys and remaining properties of an object.
3. Set the state to the remaining properties.

import {useState} from 'react';

export default function App() {
  const initialState = {
    id: 1,
    name: 'Alice',
    salary: 100,
    department: 'development',
  };
  const [employee, setEmployee] = useState(initialState);

  const removeKey = () => {
    setEmployee(current => {
      // 👇️ remove salary key from object
      const {salary, ...rest} = current;

      return rest;
    });
  };

  return (
    <div>
      <button onClick={removeKey}>Click</button>

      <h4>{JSON.stringify(employee, null, 4)}</h4>

      <hr />

      <h2>name: {employee.name}</h2>
      <h2>department: {employee.department}</h2>
      <h2>salary: {employee.salary}</h2>
    </div>
  );
}

To remove a key from the state object, we deconstruct the key and the remaining properties and update the state with the remaining properties.

Alternatively, we can use the delete operator.

import {useState} from 'react';

export default function App() {
  const initialState = {
    id: 1,
    name: 'Alice',
    salary: 100,
    department: 'development',
  };
  const [employee, setEmployee] = useState(initialState);

  const removeKey = () => {
    setEmployee(current => {
      // 👇️ create copy of state object
      const copy = {...current};

      // 👇️ remove salary key from object
      delete copy['salary'];

      return copy;
    });
  };

  return (
    <div>
      <button onClick={removeKey}>Click</button>

      <h4>{JSON.stringify(employee, null, 4)}</h4>

      <hr />

      <h2>name: {employee.name}</h2>
      <h2>department: {employee.department}</h2>
      <h2>salary: {employee.salary}</h2>
    </div>
  );
}

If we decide to use the delete operator, make sure ...to create a copy of the state object using the spread syntax.

We use spread syntax ...to unpack the object's key-value pairs into a new object and create a shallow copy.

We should not mutate state objects or arrays in React.

We setStatepass a function to , because that function is guaranteed to be called with the current (latest) state.

const removeKey = () => {
  setEmployee(current => {
    // 👇️ create copy of state object
    const copy = {...current};

    // 👇️ remove salary key from object
    delete copy['salary'];

    return copy;
  });
};

A function is passed to when calculating the next state using the previous state setState.

Otherwise, we could run into some weird race conditions if the state object we have access to doesn't represent the latest value.