/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

5 votes201 views1 answer
Redirect in netlify react
Javascript React
1 vote207 views1 answer
React-bootstrap navbar nav link refreshes page
Javascript React
0 vote198 views5 answers
React native cache clear
Javascript React
0 vote194 views2 answers
Error: Error: Unable to resolve module react-native-gesture-handler
Javascript React
1 vote207 views1 answer
How to check if bottom tab is active in react native material bottom tab
Javascript React
0 vote248 views1 answer
How to console log in react native
Javascript React
0 vote219 views1 answer
React focus textarea
Javascript React
0 vote244 views1 answer
Angular reactive form remove validation
Javascript React
10 votes159 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
0 vote219 views1 answer
Usenavigate react router dom v6
Javascript React