All Articles

How I delete objects in the state array with React Hooks and TypeScript.

⁉️ Why?

I don’t mutate non-primitive values in states directly. Never ever. This can provide many problems in React backstages.

💻 How?

I use the useState hook to handle my state updates for simple cases. I prefer to use Types or Interfaces to declare non-primitive states. Also, I can add the initial state:

type Fruit = {
  id: string;
  title: string;
};

const initialFruits: Fruit[] = [
  {
    id: 'fruit1',
    title: 'Apple',
  },
  {
    id: 'fruit2',
    title: 'Orange',
  },
  {
    id: 'fruit3',
    title: 'Mango',
  },
];

useState returns the state value and the function to update it:

const [fruits, setFruits] = useState(initialFruits);

// Logs the fruits state.
console.log(fruits);

// Deletes the fruit with the current ID.
const handleDeleteFeature = (id: string) =>
    setFruits((prevFruits) => 
        prevFruits.filter((fruit) => fruit.id !== id));

📌 Example!

The simple React component example:

import React, { useState } from 'react';

type Fruit = {
  id: string;
  title: string;
};

const initialFruits: Fruit[] = [
  {
    id: 'fruit1',
    title: 'Apple',
  },
  {
    id: 'fruit2',
    title: 'Orange',
  },
  {
    id: 'fruit3',
    title: 'Mango',
  },
];

export const App: React.FunctionComponent = () => {
  const [fruits, setFruits] = useState(initialFruits);

  const handleDeleteFeature = (id: string) =>
    setFruits((prevFruits) => 
        prevFruits.filter((fruit) => fruit.id !== id));

  return (
    <div>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit.id} onClick={() => handleDeleteFeature(fruit.id)}>
            {fruit.title}
          </li>
        ))}
      </ul>
    </div>
  );
};