Pada tahap ini kita akan membuat Aplikasi React kita berinteraksi dengan Rest API (tentunya menggunakan dummy Rest API yang sudah kita buat) untuk mengambil data dan menampilkannya pada aplikasi kita. Pertama Kita perlu memodifikasi komponen TodoList pada file src/components/TodoList.js.

src/components/TodoList.js

import { useEffect, useState } from "react";
import TodoItem from "./TodoItem";

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    // memanggil API untuk mengambil data todos
    fetch("http://localhost:8000/todos")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        // ketika Rest API sukses, simpan data dari response ke dalam state lokal
        setTodos(data);
      })
      .catch((err) => {
        if (err.name === "AbortError") {
          console.log("fetch aborted.");
        }
      });
  }, []);

  return (
    <ul id="todo-list">
      {todos.map((todo) => (
        <TodoItem todo={todo} key={todo.id} />
      ))}
    </ul>
  );
};

export default TodoList;

Pada kode di atas kita menambahkan variabel state lokal menggunakan useState. State lokal ini bersifat reaktif dan akan kita gunakan untuk menyimpan data yang kita ambil melalui Rest API.

const [todos, setTodos] = useState([]);

Baris selanjutnya kita memanggil Rest API untuk mengambil data dengan fetch API dan ketika Rest API sukses mengembalikan response maka data tersebut akan disimpan di dalam state lokal yang sudah kita tambahkan sebelumnya. Kita menuliskan kode untuk memanggil API itu di dalam function useEffect . Hal itu bertujuan agar aplikasi memanggil API setelah komponen TodoList selesai dirender atau ada state yang diupdate.

useEffect(() => {
    // memanggil API untuk mengambil data todos
    fetch("http://localhost:8000/todos")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        // ketika Rest API sukses, simpan data dari response ke dalam state lokal
        setTodos(data);
      })
      .catch((err) => {
        if (err.name === "AbortError") {
          console.log("fetch aborted.");
        }
      });
}, []);

Setelah sukses mendapatkan data dari API kita perlu merender data tersebut. Kita melakukan looping pada data tersebut dan melempar data tersebut sebagai props pada komponen TodoItem yang selanjutnya kita akan merender data tersebut pada komponen TodoItem.

return (
    <ul id="todo-list">
      {todos.map((todo) => (
        <TodoItem todo={todo} key={todo.id} />
      ))}
    </ul>
);

Pada komponen TodoItem kita perlu menangkap data yang dikirim melalui props dari komponen TodoList dan merender nya pada element HTML. Ketika data todo memiliki value done bernilai true maka kita menambahkan class "checked" pada elemen li.

src/components/TodoItem.js

const TodoItem = ({ todo }) => {
  return (
    <li className={`${todo.done ? "checked" : ""}`}> 
      {todo.title} <span className="close">x</span>
    </li>
  );
};

export default TodoItem;

Jalankan dummy Rest API kembali dengan mengetikkan perintah berikut pada terminal/command prompt.

npx json-server --watch data/db.json --port 8000

Kemudian buka tab atau jendela terminal/command prompt baru dan jalankan aplikasi React kita.

npm run start

Buka kembali url http://localhost:3000/ maka kita bisa lihat tampilan aplikasi kita sudah bisa menampilkan data todos dari dummy Rest API seperti di bawah ini.

Source Code:

• https://github.com/sakukode/react-simple-todo-app/tree/chapter/04

---

Artikel ini dibaca sebanyak 12.625 kali