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

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>
 );
}