reactjs - React Array State Filter Clears the Array

Question

When i press the delete button, i want to update the itemListState in my App.js. But it deletes everything in the state. What is wrong in my "itemDeleteHandler" function? Index number and the id matches. Filter function should do the work.

import React, { useState } from 'react';
import './App.css';
import UserInput from './components/UserInput';
import ItemList from './components/ItemList';

const App = (props) => {
  const [itemListState, setItemListState] = useState([]);

  const userInputHandler = (newUserInput) => {
    setItemListState((prevState) => ([
      ...prevState, newUserInput
    ]))
  }

  const itemDeleteHandler = (id) => {
    setItemListState((prevState) => ([
      prevState.filter((item, index) => {
        // DELETES ALL THE ITEMS WHY?
        return parseInt(id) !== index;
      })
    ]));
    console.log(itemListState);
  }

  return (
    <div>
      <UserInput onAddUserInput={userInputHandler} />
      <hr className="item__hr" />
      <ItemList userInputProp={itemListState} onDeleteItem={itemDeleteHandler} />

    </div>
  );
}

export default App;

question from:https://stackoverflow.com/questions/65646322/react-array-state-filter-clears-the-array

Answer 1

You have an extraneous pair of brackets in the delete handler, so you end up with a list with 1 item containing the rest.

You'll want

const itemDeleteHandler = (id) => {
  setItemListState((prevState) =>
    prevState.filter(
      (item, index) =>
        parseInt(id) !== index,
    ),
  );
};

instead.