CODEWITHSUNDEEP
javascriptarraysreactjsindexingonclick
Peter Stevens
Peter Stevens

Reputation: 21

Delete item at selected index when clicking delete button - React

I'm currently having an issue where when I click on the delete button for a particular element it only deletes the first item in list array every time rather than the selected one.

Any help with this would be greatly appreciated! :)

import "./css/App.css";
import React, { useRef } from "react";

function App() {
  const [item, setItem] = React.useState("");
  const [list, updateList] = React.useState([]);

  const toDoItem = (item) => {
    let newItem = { text: item.target.value, key: Date.now() };
    setItem(newItem);
  };

  const addItem = () => {
    updateList((prevState) => [...list, item]);
    document.getElementById("Input").value = "";
  };

  const deleteItem = (index) => {
    updateList((prevState) => {
      let items = [...prevState];
      console.log(items);
      items.splice(index, 1);
      return items;
    });
  };

  return (
    <div className="App">
      <h2>Type a todo item you want to complete</h2>
      <input
        type="text"
        placeholder="Add a todo..."
        id="Input"
        onChange={toDoItem}
      />
      <button id="Add" onClick={addItem}>
        Add
      </button>
      {list.map((item, index) => {
        return (
          <ol key={index}>
            {item.text[0].toUpperCase() + item.text.slice(1).toLowerCase()}
            <button>Edit</button>
            <button id="Delete" onClick={deleteItem}>
              ✗
            </button>
            {/* <button onClick={test}>test</button> */}
          </ol>
        );
      })}
    </div>
  );
}

export default App;

Upvotes: 0

Views: 1132

Answers (1)

Viet
Viet

Reputation: 12807

You forgot pass index when call deleteItem

onClick={() => deleteItem(index)}

Upvotes: 2

Related Questions