Menambahkan komentar pada file ExpensesChart.js

Menyempurnakan chart sesuai month. Memanfaatkan method Math.max() , spread operator, for of

Memodifikasi file ChartBar.js yang meliputi : menentukan barFilledHeight dan mensetting height suatu elemen sesuai dengan barFilledHeight yaitu dengan menggunakan 'dynamic styling' yang menyimpan objek CSS di dalam komponen JSX.

Menambahkan folder Chart yang berisi components Chart dan ChartBar untuk menampilkan chart tiap bulannya.

Menambahkan fungsionalitas : secara default akan menyembunyikan form penambahan expense. Form akan muncul ketika kita mengklik Add New Expenses. Serta menambahkan tombol Cancel pada Form, untuk menangani apabila kita tidak jadi menambahkan Expense. Serta apabila kita sudah selesai mengisi form dan mengklik tombol Add Expense, maka secara otomatis form akan tersembunyi lagi. Hal ini dapat dilakukan dengan menggunakan conditional dan state di React

Melakukan splitting code untuk expense list. Membuat ExpenseList.js yang khusus untuk melakukan logika dan menampilkan expense list. NOTE = kita bisa melakukan pengkondisian untuk menentukan sebuah return yang akan dilakukan oleh suatu component

Melakukan percabangan di React. Perubahan dilakukan di file Expenses.js. Sebaiknya kita melakukan percabangan (operasi logika) di luar JSX. Ada juga cara lain untuk melakukan percabangan dengan ternary operator , serta dengan trik JavaScript yaitu apabila kita melakukan operasi logika && dan statement pertama bernilai true, maka statement kedua akan di return

Menambahkan fungsi filter pada file Expenses.js sehingga ketika kita mengatur dropdown year maka yang akan tampil hanya expense di year tersebut, hal ini dapat dilakukan dengan higher-order function 'filter' yang menyimpan array baru yang sudah di filter di variabel 'filteredExpenses' di file Expenses.js

Menambahkan property 'key pada pemanggilan ExpenseItem component. Property key berfungsi supaya React dapat mengenali dimana component baru akan ditambahkan. Karena secara default React melakukan pekerjaa yang kurang efisien ketika ada penambahan elemen baru pada list. Jadi, sebaiknya kita selalu menambahkan property 'key' ketika kita bekerja dengan list of element. NOTE : key yang kita tambahkan memiliki nilai berupa 'id' dari elemen.

Stateful list. Mengubah nama expenses pada file App.js menjadi DUMMY_EXPENSES. Menggunakan useState untuk menangani inputan list (DUMMY_EXPENSES) supaya dapat ditambahkan dari inputan kita

Memodifikasi file Expenses.js dengan menghapus pemanggilan ExpenseItem componen yang statis, menjadi dinamis dengan menggunakan higher-order functions yaitu map() untuk membaca setiap array yang dikirim melalui props

Menghapus button pada ExpenseItem.js yang dulunya hanya digunakan untuk demo. Stateless vs Stateful Component. Stateless component adalah ketika menggunakan props. Stateful adalah ketika kita menggunakan state.

Menambahkan komponen baru : ExpensesFilter.js yang berfungsi untuk melakukan filter tahun. Tetapi komponen belum berfungsi secara sempurna. Menerapkan Lifting-up mengirim data dari child komponen ke parent komponen. Menerapkan two-way binding.

Cara berkomunikasi antar komponen terutama dari child ke parent component (bottom up). Yaitu dengan membuat props pada component parent yang menerima nilai berupa function, lalu mendefinisikan function tersebut di component parent, kemudian pada component child kita gunakan props untuk mengakses props buatan yang telah kita buat di component parent. Contohnya di sini adalah : onAddExpense, onSaveNewExpenseHandler

Memungkinkan form yang sudah di submit akan kosong kembali (me reset) dengan prinsip Two-way data binding. Mengset value tiap elemen (texfield) dengan (titleChange, amountChange, dateChange).