Trying to create a button which removes the task from the list, but the filter method won't wor-CodePudding

I'm able to push values but not sure where i'm going wrong with the filtering. Can someone guide me if i'm using the filter method wrong or is it something else?

import { useState } from 'react';

const App = () => {
const [task,setTask] = useState('');
const [list,setList] = useState([]);

const submitHandler = (event) => {
  event.preventDefault();
  const newTask = { id: new Date().getTime().toString(), title: task };
      setList([...list, newTask]);
      setTask('');
}

const clearList = () => {
  setList([]);
}

const removeItem = (id) => {
    const filteredList = list.filter(item => item.id !== id);
    setList(filteredList);
}

  return <div>
          <h2>To do list!</h2>
          <form onSubmit={submitHandler}> Enter Task! 
          <input type='text'
            onChange = {(event) => {setTask(event.target.value)}}>
          </input>
          </form>
          <div>
          {list.map((obj) => (
          <h4 key={obj.id}>{obj.title}<button onClick={removeItem}>X</button></h4>))}
          <button onClick={clearList}>Clear All</button>
          </div>
          </div>
}

export default App

CodePudding user response：

At the moment you're calling removeItem by using onClick={removeItem}, which will pass an event object to your removeItem function, and not an id like your function is expecting to receive. You'll want to pass your removeItem method the id of the object you want to remove when you click, which can be done by passing obj.id into it:

...
<button onClick={() => removeItem(obj.id)}>X</button>
...