Bagian selanjutnya kita akan mempraktekkan untuk mengupdate atau memperbarui data todo. Jadi skenario nya ketika kita klik pada bagian item di todo list maka value done dari todo tersebut akan berubah berbanding dari data sebelumnya. Misalkan value done sebelumnya adalah false maka ketika di klik akan berubah menjadi true begitu juga sebaliknya dan dari segi tampilan juga akan berubah. Ketika value done menjadi true maka item akan memiliki background abu-abu dengan efek strike out pada teks title nya seperti gambar di bawah ini.

Oke sekarang kita masuk ke bagian kode. Buka kembali file src/components/TodoItem.js dan ubah kodenya menjadi seperti ini.

src/components/TodoItem.js

const TodoItem = ({ todo }) => {

  const updateTodo = () => {
    todo.done = !todo.done

    fetch("http://localhost:8000/todos/" + todo.id, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(todo)
    }).then(() => {
      console.log('todo updated.')
    })
  }

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

export default TodoItem;

Pada kode di atas kita menambahkan function updateTodo di dalam function componen TodoItem yang bertugas mengupdate value done dari data todo kemudian memanggil API untuk memperbarui datanya.

const updateTodo = () => {
    todo.done = !todo.done

    fetch("http://localhost:8000/todos/" + todo.id, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(todo)
    }).then(() => {
      console.log('todo updated.')
    })
  }

Kemudian di bagian template, kita memindahkan data todo title ke dalam sebuah div dan menambahkan event onClick pada elemen div tersebut yang akan memanggil function updateTodo.

<div onClick={updateTodo}>{todo.title}</div> 

Sampai tahap ini kamu sudah berhasil membuat fungsi untuk mengubah data. Kamu bisa mencobanya dengan mengklik pada salah satu item di bagian todo list. Tapi sama halnya saat menambah data, ketika ada perubahan data. data tersebut tidak otomatis terupdate pada state. Sehingga tampilan dari todo tidak berubah sama sekali. Baru ketika kita merefresh halaman browsernya maka akan terlihat data sudah berubah. Untuk itu kita akan melakukan hal yang sama seperti ketika menambah data baru. Kita akan merefresh data pada komponen TodoList dengan bantuan function setRefresh yang ada pada komponen TodoList. Pertama buka kembali file src/components/TodoList.js dan ubah sedikit kode di bagian berikut.

<TodoItem todo={todo} key={todo.id} setRefresh={setRefresh} />

Pada kode di atas kita mengirim function setRefresh sebagai props pada komponen TodoItem. Selanjutnya kita akan mengubah pada bagian komponen TodoItem. Buka kembali file src/components/TodoItem.js. Lakukan perubahan seperti di bawah ini.

src/components/TodoItem.js

const TodoItem = ({ todo, setRefresh }) => {

  const updateTodo = () => {
    todo.done = !todo.done

    fetch("http://localhost:8000/todos/" + todo.id, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(todo)
    }).then(() => {
      console.log('todo updated.')
      setRefresh(true)
    })
  }

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

export default TodoItem;

Pada kode di atas kita menangkap function setRefresh yang dikirim sebagai props dari komponen TodoList.

const TodoItem = ({ todo, setRefresh }) => {
	...

Dan selanjutnya di dalam function updateTodo ketika API sukses dipanggil dan data sudah terupdate maka kita memanggil function setRefresh dengan nilai parameter adalah true sehingga state isRefresh pada komponen akan berubah menjadi true juga dan otomatis function utk mengambil data todo list akan dijalankan kembali.

const updateTodo = () => {
    todo.done = !todo.done

    fetch("http://localhost:8000/todos/" + todo.id, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(todo)
    }).then(() => {
      console.log('todo updated.')
      setRefresh(true)
    })
}

Selesai, ketika kita mengklik salah satu baris pada todo list, maka otomatis status todo akan berubah yang ditandai dengan perubahan style tampilan pada baris todo itu sendiri.

Source Code:

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

---

Artikel ini dibaca sebanyak 6.770 kali