Can’t get array item to filter out in React

  javascript, react-hooks, reactjs

React newb here. Basically I am simply trying to remove an array item with the handleRemove function onClick. Seems like standard procedure and most of what I’ve read in articles is doing something near identical in my eyes.

I’ve messed around with it a ton and at one point had it deleting the item, but then it wouldn’t rerender, and I eventually ended up where I started. Also tried putting the handler on both li and span, but neither worked. I also have more data, but I removed some of it for space sake. I also have a category openguard as well.

function Technique() {

  const [list, setList] = React.useState([
    {
      closedguard: [
        {
          name: "Armbar",
          link: "",
          x: "X",
          id: "1",
        },
        {
          name: "Triangle",
          link: "",
          x: "X",
          id: "2",
        },
        {
          name: "Omaplata",
          link: "",
          x: "X",
          id: "3",
        },
      ],
    },
  ]);

  const handleRemove = (id) => {
    const newList = list.filter(move => move.id !== id);
    setList(newList);
  };

  return (
    <div className="guard">
      <span onClick={(e) => toggleSubMenu(e, 0)}>
        <AddCircleIcon style={{ position: "relative", top: "26" }} />
      </span>{" "}
      
      <ul className="techUl">
        {" "}
        Closed Guard
        {list.map((pos) =>pos.closedguard.map((move, id) => (
          <li
            onClick={() => handleRemove(id)}
            key={id}
            className="techLi"              
          >{move.name}<span > {move.x}</span>    
          </li>        
          ))
        )}
      </ul>  
    </div>
  );
}

export default Technique;

Source: Ask Javascript Questions

LEAVE A COMMENT