Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I deleted all the elements behind it, and printing is not the result I wanted in react

When I clicked on the element I wanted to delete, the result I wanted was not printed. The key for my current element was not printed, only the keys for the previous elements were printed
And I deleted all the elements that I clicked on and after, oh my god

import { useState } from 'react';

const UtilsGetID = () => {
  return Math.random().toString().slice(-8);
};

const Demo = () => {
  const handleDel = (e) => {
    e.stopPropagation();
    e.preventDefault();
    const key = e.target.dataset.key;
    const index = dataList.findIndex((item) => {
      console.log('item.key----', item.key, key);
      return item.key === key;
    });
    console.log('index----', index);
    if (index > -1) {
      const item = dataList.splice(index, 1);
      console.log('item----', item);
    }
    setDataList([...dataList]);
  };

  const id = UtilsGetID();
  const [dataList, setDataList] = useState([
    <div key={id} data-key={id} onClick={(e) => handleDel(e)}>
      xxx,{id}
    </div>,
  ]);
  const addCard = () => {
    const id = UtilsGetID();
    setDataList([
      ...dataList,
      <div key={id} data-key={id} onClick={(e) => handleDel(e)}>
        xxx,{id}
      </div>,
    ]);
  };

  return (
    <>
      <button onClick={() => addCard()}>addNewEle</button>
      {dataList.map((item) => {
        return item;
      })}
    </>
  );
};

export default Demo;

How to delete only the elements that I have clicked on, like Todolist

Tags:

2

Answers


  1. 0

    Try this out

    "import { useState } from 'react';

const UtilsGetID = () => {
  return Math.random().toString().slice(-8);
};

const Demo = () => {
  const handleDel = (key) => {
    // Create a new array without the item to be deleted
 setDataList(prevList => prevList.filter((_, index) => index !== key));

  };
  const id = UtilsGetID();
  const [dataList, setDataList] = useState([
    <div key={id} data-key={id} onClick={(e) => handleDel(e)}>
      xxx,{id}
    </div>,
  ]);
  const addCard = () => {
    const id = UtilsGetID();
    setDataList([
      ...dataList,
      <div key={id} data-key={id} onClick={(e) => handleDel(e)}>
        xxx,{id}
      </div>,
    ]);
  };

  return (
    <>
      <button onClick={() => addCard()}>addNewEle</button>
      {dataList.map((item, index) => (
        <div key={index} onClick={() => handleDel(index)}>
          {item},{index}
        </div>
      ))}
    </>
  );
};

export default Demo;"

    i have updated the handleDel function "its easy to use filter function for removing element from array",
    Let me know if this is good
    Thank You

    Login or Signup to reply.
  2. 0

    code Problem

    • Keep the state as pure data.
    • Handle dataList as an object or array in the state, instead of JSX.

    problem solving

    const [dataList, setDataList] = useState([
    <div key={id} data-key={id} onClick={(e) => handleDel(e)}>
      xxx,{id}
    </div>,
  ]);
  
  const [dataList, setDataList] = useState([{ id: UtilsGetID(), content: "xxx" },]);
  
  
   const handleDel = (e) => {
    e.stopPropagation();
    e.preventDefault();
    const key = e.target.dataset.key;
    const index = dataList.findIndex((item) => {
      return item.key === key;
    });
    if (index > -1) {
      const item = dataList.splice(index, 1);
      console.log('item----', item);
    }
    setDataList([...dataList]);
  
    const handleDel = (e, id) => {
    e.stopPropagation();
    e.preventDefault();
    setDataList(dataList.filter((item) => item.id !== id));
  };
    • Manage dataList in the state as shown in the code above.
    • Handle it using the filter method
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search