/Javascript/React/React hooks delete item from array

React hooks delete item from array

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  const defaultList = [
    { name: "ItemOne" },
    { name: "ItemTwo" },
    { name: "ItemThree" }
  ];

  const [list, updateList] = useState(defaultList);

  const handleRemoveItem = (e) => {
   const name = e.target.getAttribute("name")
    updateList(list.filter(item => item.name !== name));
  };

  return (
    <div>
      {list.map(item => {
        return (
          <>
            <span name={item.name} onClick={handleRemoveItem}>
              x
            </span>
            <span>{item.name}</span>
          </>
        );
      })}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Source: stackoverflow.com

Similar codes

3 votes390 views1 answer
Showing an image in react js
Javascript React
0 vote401 views3 answers
SyntaxError: /mnt/c/myAppFile/hello-rails-react/app/javascript/components/Greeting.js: Support for the experimental syntax 'jsx' isn't currently enabled rails
Javascript React
0 vote344 views2 answers
Add typescript to react-native
Javascript React
0 vote407 views1 answer
React scroll to top on page refresh - don't restore position
Javascript React
0 vote374 views1 answer
Appregistry react native
Javascript React
8 votes338 views3 answers
Disable eslint for react project
Javascript React
0 vote336 views1 answer
React dynamic load script
Javascript React
1 vote340 views2 answers
How to create react native app
Javascript React
-1 vote353 views1 answer
How to load the images from the website dynamically in react
Javascript React
18 votes340 views2 answers
How to import background image in inline css in react
Javascript React