React To-do Uygulaması API ile Görev Silme #6

Merhaba arkadaşlar, bu yazımda sizlere React To-do Uygulaması API ile Görev Silme konusundan bahsedeceğim.

Bu yazıda React to-do uygulamamızın altıncı adımında, kullanıcıların görevleri nasıl silebileceğini öğreneceğiz.

Görev silme işlemi, kullanıcının belirli bir görevi listeden kaldırmasını sağlar.

Bu işlemi gerçekleştirmek için aşağıdaki adımları takip edebilirsiniz:

1. TodoItem bileşenine “Sil” düğmesini ekleyin.
2. “Sil” düğmesine tıklandığında, ilgili görevin Id’sini alın.
3. API isteğiyle ilgili görevi silmek için istek atıyoruz ve id bilgisi ile silme işlemini gerçekleştiriyoruz.
4. Başarılı bir şekilde silme işlemi gerçekleştiğinde, görevi ekrandan da kaldırıyoruz.

import React from 'react';
import axios from 'axios';

function TodoItem({ todo, onDelete }) {
  const handleDelete = async () => {
    try {
      onDelete(todo.id); 
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <li>
      {todo.title}
      <button onClick={handleDelete}>Sil</button>
    </li>
  );
}

export default TodoItem;

Yukarıdaki kodda, handleDelete fonksiyonunda onDelete metoduyla API’ye görev silme isteği gönderiyoruz. İsteğin URL’sinde todo.id kullanarak ilgili görevin benzersiz kimliğine erişiyoruz. Başarılı bir şekilde silme işlemi gerçekleştirerek görevi ekrandan da kaldırıyoruz.

TodoItem componentimizin güncellenmiş hali aşağıdaki gibidir:

import React, { useState } from 'react';
import axios from 'axios';

function TodoItem({ todo, onUpdate, onDelete }) {
  const [isEditing, setIsEditing] = useState(false);
  const [updatedTitle, setUpdatedTitle] = useState(todo.title);

  const handleUpdate = async () => {
    try {
      onUpdate(todo.id, updatedTitle); // Görevi güncelle
      setIsEditing(false);
    } catch (error) {
      console.error(error);
    }
  };

  const handleDelete = async () => {
    try {
      onDelete(todo.id); // Görevi sil
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <li>
      {isEditing ? (
        <input
          type="text"
          value={updatedTitle}
          onChange={(e) => setUpdatedTitle(e.target.value)}
        />
      ) : (
        todo.title
      )}
      <button onClick={() => setIsEditing(true)}>Düzenle</button>
      {isEditing ? (
        <button onClick={handleUpdate}>Güncelle</button>
      ) : (
        <button onClick={handleDelete}>Sil</button>
      )}
    </li>
  );
}

export default TodoItem;

Umarım faydalı olur.

Bir sonraki adımda uygulamayı yayınlamayı öğreneceğiz.

Görüşmek üzere…