I am not able to delete items in my todo list made with react, please help me with error in my code

Question

below is my code for todo list i am not able to delete items in my list in delete items function please help me with error.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [inputList, setInputList] = useState("");
  const [items, setItems] = useState([]);
  const change1 = (e) => {
    setInputList(e.target.value);
  };
  const change2 = () => {
    setItems((oldItems) => {
      return [...oldItems, inputList];
    });
    setInputList("");
  };
  const deleteItem = (ind) => {
    return setItems(items.filter((item)=>{return item.ind!==ind}))
  }
  return (
    <div className="App">
      <div className="inner_div">
        <h1 style={{ borderBottom: "2px solid black" }}>ToDo List</h1>
        <input type="text" onChange={change1} value={inputList} />
        &nbsp;&nbsp;
        <button onClick={change2}>+</button>
        <ol style={{ listStyle: "none" }}>
          {items.map((itemval, ind) => {
            return (
              <div style={{ display: "flex" }}>
                <button onClick={deleteItem}>-</button>&nbsp;
                <li id={ind}>{itemval}</li>
              </div>
            );
          })}
        </ol>
      </div>
    </div>
  );
}

Answer 1

Issue

You are passing the click event to the deleteItem handler.

const deleteItem = (ind) => { // <-- click event object!
  return setItems(items.filter((item)=>{return item.ind!==ind}))
}

...

<button onClick={deleteItem}>-</button>

There is also an issue with your filter function, you are comparing the index to a property on the items and this condition will almost always be false and clear the items array.

(item)=>{return item.ind!==ind}) // item.ind is undefined

Solution

Fix the deleteItem handler to correctly compare indices.

const deleteItem = (index) => {
  setItems(items => items.filter((item, i)=> i !== index));
}

You need to pass the mapping index value to the callback. Don't forget to add an unique React key to the mapped elements. Since you've no GUIDs on the item elements the array index will have to do for now.

{items.map((itemval, index) => {
  return (
    <div key={ind} style={{ display: "flex" }}>
      <button onClick={() => deleteItem(index)}>-</button>&nbsp;
      <li id={index}>{itemval}</li>
    </div>
  );
})}

If you want to avoid the anonymous function in the button's onClick handler you can convert deleteItem to a curried function and enclose/close over the specific todo's index value. A function is returned to serve as the onClick callback.

const deleteItem = (index) => () => {
  setItems(items => items.filter((item, i)=> i !== index));
}

...

<button onClick={deleteItem(index)}>-</button>

Answer 2

Try this! This should work

Items does not have any ind properties. Index is the second parameter of the filter and you must use it in the filter to remove, and you have to pass the index in the function deleteItem (ind).

 import React, { useState } from "react";
 import "./styles.css";

  export default function App() {
   const [inputList, setInputList] = useState("");
   const [items, setItems] = useState([]);
   const change1 = (e) => {
   setInputList(e.target.value);
 };
 const change2 = () => {
 setItems((oldItems) => {
  return [...oldItems, inputList];
 });
 setInputList("");
};
const deleteItem = (ind) => {
return setItems(
  items.filter((item, i) => {
    return i !== ind;
   })
  );
 };
  return (
   <div className="App">
   <div className="inner_div">
    <h1 style={{ borderBottom: "2px solid black" }}>ToDo List</h1>
    <input type="text" onChange={change1} value={inputList} />
    &nbsp;&nbsp;
    <button onClick={change2}>+</button>
    <ol style={{ listStyle: "none" }}>
      {items.map((itemval, ind) => {
        return (
          <div style={{ display: "flex" }}>
            <button onClick={() => deleteItem(ind)}>-</button>&nbsp;
            <li id={ind}>{itemval}</li>
          </div>
        );
      })}
    </ol>
  </div>
</div>
 );
}