React To-do Uygulaması API ile Görev Ekleme #3

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

Bu yazıda, React to-do uygulamasında API ile görev ekleme adımını öğreneceğiz. Önceki yazımızda görevleri API’den listelemeyi ve kullanıcıya göstermeyi sağlamıştık. Şimdi ise kullanıcının yeni görevler eklemesini ve bunların API ile kaydedilmesini sağlayacağız.

Adım 1: AddTodo Componentini Oluşturma

İlk olarak, kullanıcının yeni görevler eklemesini sağlayacak bir AddTodo componenti oluşturacağız.

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

function AddTodo() {
  const [title, setTitle] = useState('');

  const handleInputChange = (e) => {
    setTitle(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await axios.post('http://localhost:5065/api/todos', { title });
      setTitle('');
      // Görev başarıyla eklendiğinde yapılacak işlemler
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={title} onChange={handleInputChange} />
      <button type="submit">Ekle</button>
    </form>
  );
}

export default AddTodo;

Yukarıdaki kodda, AddTodo componentinde title adında bir state ve setter’ı tanımlıyoruz. Bu state, kullanıcının girdiği yeni görevin başlığını tutacaktır.

handleInputChange fonksiyonu, giriş alanındaki değişiklikleri yakalar ve setTitle aracılığıyla title state’ini günceller.

handleSubmit fonksiyonu, formun gönderilmesini yakalar ve yeni görev kaydı için API’ye istek gönderilir. Axios ile POST isteği gerçekleştirerek yeni görev kaydının API ile eklenmesini gerçekleştiririz. Görev başarıyla eklendikten sonra setTitle aracılığıyla title state‘ini sıfırlarız. Hata durumunda, hatayı konsola yazdırırız.

Formu render ederken onSubmit olayını handleSubmit fonksiyonuna bağlıyoruz. Böylece kullanıcı formu gönderdiğinde handleSubmit fonksiyonu çalışacaktır.

Adım 2: App Componentini Güncelleme

Şimdi, App componentimizi güncelleyerek AddTodo componentini kullanacağız ve kullanıcının yeni görevler eklemesini sağlayacağız.

import React from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

function App() {
  return (
    <div className="App">
      <h1>React To-do Uygulaması</h1>
      <AddTodo />
      <TodoList />
    </div>
  );
}

export default App;

Yukarıdaki kodda, App bileşenimizi güncelledik ve AddTodo bileşenini ekledik. Kullanıcı, AddTodo bileşeni aracılığıyla yeni görevler ekleyebilecektir.

Adım 3: Sonuçları Görüntüleme

Tarayıcıda uygulamayı başlattıktan sonra yeni görev eklemek için text alanını kullanarak eklemeyi gerçekleştirebiliriz. Sonrasında da yeni görevlerin başarıyla eklenip eklenmediğini ve listeye yansıyıp yansımadığını kontrol edebiliriz.

Bu yazıda, React to-do uygulamasında kullanıcının yeni görevler ekleme işlemini API ile sağlamış oluruz. Bir sonraki adımda görevleri güncellemeyi öğreneceğiz.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…