1import React, { useState } from "react";
2import ReactDOM from "react-dom";
3
4import "./styles.css";
5
6const App = () => {
7 const defaultList = [
8 { name: "ItemOne" },
9 { name: "ItemTwo" },
10 { name: "ItemThree" }
11 ];
12
13 const [list, updateList] = useState(defaultList);
14
15 const handleRemoveItem = (e) => {
16 const name = e.target.getAttribute("name")
17 updateList(list.filter(item => item.name !== name));
18 };
19
20 return (
21 <div>
22 {list.map(item => {
23 return (
24 <>
25 <span name={item.name} onClick={handleRemoveItem}>
26 x
27 </span>
28 <span>{item.name}</span>
29 </>
30 );
31 })}
32 </div>
33 );
34};
35
36const rootElement = document.getElementById("root");
37ReactDOM.render(<App />, rootElement);