Попытка удалить элемент из списка элементов

Я пытаюсь удалить элемент из списка элементов, но он удаляет все элементы в списке при загрузке страницы, я уверен, что это из-за карты, я не могу придумать способ исправить это, не делая подробную страницу для todos, но я не хочу делать подробную страницу для элемента todo, любая помощь будет оценена по достоинству

 let deleteTodo = async(id) => {
    console.log(id)
    fetch(`http://localhost:8000/api/delete/${id}/`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json"
      },
    })
  }

 return (
    <div className="App">
      <div>
        <div>

          
          <form onSubmit={handleSubmit}>
            <label>
              Title:
              <input type="text" placeholder='Title here' onChange={handleInputChange} name="title" value={values.title} />
            </label>
            <br></br>
            <br></br>
            <label>
              Body:
              <input type="text" placeholder='Body here' onChange={handleInputChange} name="body" value={values.body} />
            </label>
            <br></br>
            <br></br>
            
            <input type="submit" value="Submit" />
          </form>

        </div>

        <div>
          {todos.map((todo, index) => (
            <div key={index}>
              <h1>{todo.title}</h1>
              <h4>{todo.body}</h4>
              <button onClick={deleteTodo(todo.id)}>delete</button>
            </div>
          ))}
        </div>

      </div>
    </div>
  );
}

Обратный вызов кнопки немедленно вызывается при рендеринге.

<button onClick={deleteTodo(todo.id)}>delete</button>

Должен вызываться в функции-обработчике обратного вызова.

<button onClick={() => deleteTodo(todo.id)}>delete</button>

Или сделать deleteTodo curried-функцией, чтобы она немедленно вызывалась и закрывала переданное id значение и возвращала функцию, которая будет вызвана при нажатии на кнопку.

const deleteTodo = (id) => () => {
  console.log(id);
  fetch(`http://localhost:8000/api/delete/${id}/`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json"
    },
  })
};

...

<button onClick={deleteTodo(todo.id)}>delete</button>
Вернуться на верх