How to Remove an Item from an Array in React State

Syazwan — Tue, 11 Jun 2024 07:00:52 +0000

Removing an item from an array in React state is straightforward using the filter method. This method creates a new array without the specified item.

Example

Initial Array:

const arr = [1, 2, 3];

Create a New Array without the Item:

const new_arr = arr.filter((item) => item !== 2);

Result:

console.log(new_arr); // [1, 3]

Implementation in React

State Initialization

The state items is initialized with an array of strings.

const [items, setItems] = useState([
  "Item One",
  "Item Two",
  "Item Three",
  "Item Four",
  "Item Five",
]);

Removing an Item

The removeItem function uses setItems to update the state. It filters out the item to be removed by creating a new array that excludes the specified item.

const removeItem = (itemToRemove) => {
  setItems((prevItem) => prevItem.filter((item) => item !== itemToRemove));
};

Rendering Items

The items are mapped to display each one with a Delete button. Clicking the button triggers removeItem to update the state.

<div className="p-8 flex flex-col gap-4 items-start">
  {items.map((item) => (
    <div key={item} className="text-sm flex border px-2 py-1 items-center">
      <p className="w-32">{item}</p>
      <button
        className="border rounded bg-red-600 p-1 text-slate-200"
        onClick={() => removeItem(item)}
      >
        Delete
      </button>
    </div>
  ))}
</div>

Full code

import { useState } from "react";

export default function App() {
  const [items, setItems] = useState([
    "Item One",
    "Item Two",
    "Item Three",
    "Item Four",
    "Item Five",
  ]);

  const removeItem = (itemToRemove) => {
    setItems((prevItem) => prevItem.filter((item) => item !== itemToRemove));
  };

  return (
    <div className="p-8 flex flex-col gap-4 items-start">
      {items.map((item) => (
        <div key={item} className="text-sm flex border px-2 py-1 items-center">
          <p className="w-32">{item}</p>
          <button
            className="border rounded bg-red-600 p-1 text-slate-200"
            onClick={() => removeItem(item)}
          >
            Delete
          </button>
        </div>
      ))}
    </div>
  );
}

Conclusion

Using the filter method in React allows you to effectively manage and update arrays in the state, ensuring a clean and efficient way to remove items.

How to Prevent Flexbox Items from Stretching to Full Width in Tailwind CSS

Syazwan — Tue, 11 Jun 2024 03:35:45 +0000

If you use flex and flex-col on a parent container, child elements will occupy the full width. This happens because the default value for align-items is stretch.

Why Do Child Elements Stretch?

When align-items is set to stretch, child elements fill the width of the parent container.

Example:

<form className="flex flex-col gap-2">
  <input className="border py-1 px-2" />
  <button className="border px-4 py-1 bg-slate-200">Submit</button>
</form>

In this example, the input, and button elements stretch to fill the width of the <form>.

Solutions

To prevent stretching, use either self-start on child elements or items-start on the parent element.

Option 1: Using `self-start` on Child Elements

The self-start class makes a child element align to the start of the cross axis:

<form className="flex flex-col gap-2">
  <input className="border py-1 px-2 self-start" />
  <button className="border px-4 py-1 bg-slate-200 self-start">
    Submit
  </button>
</form>

Option 2: Using `items-start` on the Parent Element

The items-start class aligns all child elements to the start of the cross axis:

<form className="flex flex-col gap-2 items-start">
  <input className="border py-1 px-2" />
  <button className="border px-4 py-1 bg-slate-200">
    Submit
  </button>
</form>

Wraping Up

Using self-start on child elements or items-start on the parent container prevents flexbox items from stretching to fill the entire width.

Forem: Syazwan