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