Skip to content
Advertisement

Removing Elements through button click within a map function?

I’m building a todo application in which all elements are inserted in a list of objects and then mapped using the map() function. I’m attempting to add a button with every map, that once clicked – will delete the specific element from the list. I’ve read quite a bit of documentation relating to the connection of useState and map(), but I’m still confused in how to implement this, and connect the specific element to the removal.

import { useState } from "react";
const List = (props) => {
  return props.items.map((item) => {
    return (
      <>
        <div>
          <p>{item.item}</p>
          <p>{item.date}</p>
          <p>{item.id}</p>
        </div>
        {/* Below is the button im attempting to implement */}
        <button onClick={}>Remove Item</button>
      </>
    );
  });
};
export default List;

Advertisement

Answer

As per your explanation, I kind of understand you have todo items and you need to remove an item by clicking the remove button so I have made one working demo to take dummy items and remove it, Kindly check the below code to remove items.

list.js

import React from 'react';

import { useState } from 'react';
const List = (props) => {
  console.log(props);
  const [items, setItems] = useState(props.items);

  const remove = (item) => {
    console.log(item);
    let filteredArr = items.filter((el) => el.id !== item.id);
    setItems(filteredArr);
  };
  const listItems = items.map((item, i) => (
    <>
      <div>
        <p>{item.item}</p>
        <p>{item.date}</p>
        <p>{item.id}</p>
      </div>
      {/* Below is the button im attempting to implement */}
      <button onClick={() => remove(item)}>Remove Item</button>
    </>
  ));
  return <div>{listItems}</div>;
};
export default List;

app.js

import React from 'react';
import './style.css';
import List from './lists.js';

export default function App() {
  const items = [
    { id: 0, item: 'item 1', date: '22/12/2021' },
    { id: 1, item: 'item 2', date: '23/12/2021' },
    { id: 2, item: 'item 3', date: '24/12/2021' },
    { id: 3, item: 'item 4', date: '25/12/2021' },
  ];
  return (
    <>
      <List items={items} />
    </>
  );
}

working demo link: https://stackblitz.com/edit/react-n4z2qj?file=src/App.js

Advertisement