CODEWITHSUNDEEP
javascriptreactjstypescript
justsomeron
justsomeron

Reputation: 145

Delete last item from array with useState

I'm new to JS, React and TypeScript. I did a tutorial to add a todo-list. To get some practice, I decided to add the delete button and the "remove last item" button.

Deleting the complete list worked out fine (I'm proud of myself, hah!) but the "delete last item" is not working, I tried different things (e.g. just todos.pop()).


function App() {
  const [todos, setTodos] = useState([])
  const [input, setInput] = useState("")

  // prevents default, adds input to "todos" array and removes the input from form
  const addTodo = (e) => {
    e.preventDefault()

    setTodos([...todos, input])
    setInput("")
  }

  // deletes the todo-list
  const clearTodo = (e) => {
    e.preventDefault()

    setTodos([])
  }

  // deletes the last entry from the todo-list
  const clearLastTodo = (e) => {
    e.preventDefault()

    setTodos(todos.pop())
  }

  return (
    <div className="App">
      <h1>ToDo Liste</h1>
      <form>
        <input 
          value={input} 
          onChange={(e) => setInput(e.target.value)} 
          type="text" 
        />
        <button type="submit" onClick={addTodo}>
          Hinzufügen
        </button>
      </form>

      <div>
        <h2>Bisherige ToDo Liste:</h2>
        <ul>
        {todos.map((todo) => (
          <li>{todo}</li>
        ))}
        </ul>
      </div>

      <div>
        <form action="submit">
        <button type="submit" onClick={clearLastTodo}>
            Letzten Eintrag löschen
          </button>
          <button type="submit" onClick={clearTodo}>
            Liste löschen
          </button>
        </form>
      </div>
    </div>
  );
}

export default App;

Am I missing something (clearly I am, otherwise it would work)? But what? :D

Thank you in advance!

Upvotes: 10

Views: 11748

Answers (3)

Youssouf Oumar
Youssouf Oumar

Reputation: 46141

You could do it as below. The spread operator makes sure you don't give the same reference to setTodos:

const clearLastTodo = (e) => {
    e.preventDefault();
    let copy = [...todos]; // makes sure you don't give the same reference to setTodos
    copy.pop()
    setTodos(copy); 
  }

General note about states in React:

Always treat state variables as if they were immutable. It's obvious for primitive values like Number, Boolean... But for Objects and Arrays, changing their content doesn't make them different, it should be a new memory reference.

Upvotes: 4

1tai
1tai

Reputation: 380

There are 3 possible solutions to your problem.

Solution 1: Slice the array from the first element to the -1 (1 before the last) element.

setTodos(todos.slice(0, -1)));

Or

setTodos((previousArr) => (previousArr.slice(0, -1)));

Solution 2: Create a copy array and splice it with the value of -1. Then set the array from the first element to the -1 element.

const copyArr = [...todos];
copyArr.splice(-1);
setTodos(copyArr);

Solution 3: Create a copy list with the ..., pop the copy and set the new value of the array to the copy.

const copyArr = [...todos];
copyArr.pop();
setTodos(copyArr);

Upvotes: 17

nart
nart

Reputation: 1848

There are couple way to remove the last item from an array in javascript

const arr = [1, 2, 3, 4, 5]
arr.splice(-1) // -> arr = [1,2,3,4]
// or
arr.pop()      // -> arr = [1,2,3,4]
// or
const [last, ...rest] = arr.reverse()
const removedLast = rest.reverse()

Following the guide updating objects and arrays in state

const onRemoveLastTodo = () => {
    // Try with each way above
  setTodos(todos.splice(-1))
}

Upvotes: 1

Related Questions