Блог

Я пытаюсь создать приложение для списка дел с отметкой времени и вычеркнуть элемент списка при нажатии кнопки «Удалить», но когда я нажимаю кнопку «Удалить», все элементы пропускаются. Я искал везде, но не могу заставить его работать для моего кода. Я могу извлечь уникальный идентификатор с помощью функции кнопки удаления, но я не могу понять, как использовать этот идентификатор, чтобы удалить только этот идентификатор.

 import "../App.css"; import moment from "moment";  const List = () =gt; {  const [strike, setStrike] = useState(false);  const [addtime, setaddTime] = useState(moment().utcOffset(" 05:30").format("YYYY-MM-DD HH:mm:ss ").toString());  const [store, setStore] = useState([]);  const [endTime, setendTime] = useState();  const [inputData, setInputData] = useState('');  const [items, setItems] = useState([]);   //to add an item   const addItem = () =gt; {  if (!inputData) {  } else {  const allInputData = {id: new Date().getTime().toString(), name:inputData}  setItems([...items, allInputData]);  setInputData("");  setaddTime(  moment().utcOffset(" 05:30").format("YYYY-MM-DD HH:mm:ss ").toString()  );  setStore([...store, addtime]);  }  };   // to delete an item   const deleteItem = (index) =gt; {  const boolstrike = items.filter((elem) =gt; {  return index == elem.id;     })    console.log(boolstrike);    setStrike(!!boolstrike);    };  //to remove time  const deleteTime = () =gt; {  setendTime (moment().utcOffset(" 05:30").format("YYYY-MM-DD HH:mm:ss ").toString());   }     // to remove all items   const removeAll = () =gt; {  setItems([]);  setStore([]);  };   return (  lt;gt;  lt;div className="parent-div"gt;  lt;div className="child-div"gt;  lt;h3gt;TO DO LISTlt;/h3gt;  lt;div className="addItems"gt;  lt;input  type="text"  placeholder="what needs to be done?"  value={inputData}  onChange={(e) =gt; setInputData(e.target.value)}  /gt;  lt;button  type="button"  onClick={addItem}  className="btn btn-secondary"  gt;  Create  lt;/buttongt;  lt;/divgt;  lt;div id="wrapper"gt;  lt;div id="left" className="showItems"gt;  {items.map((elem) =gt; {  return (  lt;div className="eachItem" key={elem.id}gt;  lt;h3  style={{  textDecoration: strike ? "line-through" : "none",  }}  gt;  {elem.name}  lt;/h3gt;  lt;button  type="button"  onClick={() =gt; deleteItem(elem.id)}  className="btn btn-danger btn-sm"  gt;  Delete  lt;/buttongt;    lt;/divgt;  );  })}  lt;/divgt;  lt;div id="right"gt;  {store.map((elim, ind) =gt; {  return (  lt;div className="eachdate" key={ind}gt;  lt;h6gt;{"Task Created at:"   elim} lt;/h6gt;  lt;button  type="button"  onClick={() =gt; deleteTime()}  className="btn btn-danger btn-sm"  gt;  Delete  lt;/buttongt;    lt;/divgt;  );  })}  lt;/divgt;  lt;/divgt;  lt;div className="showItems"gt;  lt;button onClick={removeAll} className="btn btn-danger"gt;  Delete All  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/gt;  ); };  export default List;```      

Вы можете попробовать добавить страйк в список предметов и отследить это. таким образом, если нажать кнопку удалить btn, вы можете пометить этот элемент как вычеркнутый.

Вы можете установить strike время удаления

 const deleteItem = (index) =gt; {  const updatedItems = items.filter((elem) =gt; {  if (index == elem.id) {  elem.strike = true;  }  return elem;  });   setItems(updatedItems);  };  

и на основе этого класса свойств будет применен, будут вычеркнуты только удаленные элементы.

обновленный код:

 import React, { useState } from 'react'; import './App.css'; import moment from 'moment';  const List = () =gt; {  const [strike, setStrike] = useState(false);  const [addtime, setaddTime] = useState(  moment().utcOffset(' 05:30').format('YYYY-MM-DD HH:mm:ss ').toString()  );  const [store, setStore] = useState([]);  const [endTime, setendTime] = useState();  const [inputData, setInputData] = useState('');  const [items, setItems] = useState([]);   //to add an item   const addItem = () =gt; {  if (!inputData) {  } else {  const allInputData = {  id: new Date().getTime().toString(),  name: inputData,  };  setItems([...items, allInputData]);  setInputData('');  setaddTime(  moment().utcOffset(' 05:30').format('YYYY-MM-DD HH:mm:ss ').toString()  );  setStore([...store, addtime]);  }  };   // to delete an item   const deleteItem = (index) =gt; {  const updatedItems = items.filter((elem) =gt; {  if (index == elem.id) {  elem.strike = true;  }  return elem;  });   setItems(updatedItems);  };  //to remove time  const deleteTime = () =gt; {  setendTime(  moment().utcOffset(' 05:30').format('YYYY-MM-DD HH:mm:ss ').toString()  );  };   // to remove all items   const removeAll = () =gt; {  setItems([]);  setStore([]);  };   return (  lt;gt;  lt;div className="parent-div"gt;  lt;div className="child-div"gt;  lt;h3gt;TO DO LISTlt;/h3gt;  lt;div className="addItems"gt;  lt;input  type="text"  placeholder="what needs to be done?"  value={inputData}  onChange={(e) =gt; setInputData(e.target.value)}  /gt;  lt;button  type="button"  onClick={addItem}  className="btn btn-secondary"  gt;  Create  lt;/buttongt;  lt;/divgt;  lt;div id="wrapper"gt;  lt;div id="left" className="showItems"gt;  {items.map((elem) =gt; {  console.log(elem);  return (  lt;div className="eachItem" key={elem.id}gt;  lt;h3  style={{  textDecoration: elem.strike ? 'line-through' : 'none',  }}  gt;  {elem.name}  lt;/h3gt;  lt;button  type="button"  onClick={() =gt; deleteItem(elem.id)}  className="btn btn-danger btn-sm"  gt;  Delete  lt;/buttongt;  lt;/divgt;  );  })}  lt;/divgt;  lt;div id="right"gt;  {store.map((elim, ind) =gt; {  return (  lt;div className="eachdate" key={ind}gt;  lt;h6gt;{'Task Created at:'   elim} lt;/h6gt;  lt;button  type="button"  onClick={() =gt; deleteTime()}  className="btn btn-danger btn-sm"  gt;  Delete  lt;/buttongt;  lt;/divgt;  );  })}  lt;/divgt;  lt;/divgt;  lt;div className="showItems"gt;  lt;button onClick={removeAll} className="btn btn-danger"gt;  Delete All  lt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/gt;  ); };  export default List;