Sebelum React 16.3, satu-satunya cara untuk ngirim state dari komponen parent ke komponen child adalah pake props. Jadi nggak jarang kita bikin komponen yang punya prop xyz tapi nggak memproses nilai prop itu, dia punya prop itu cuma biar bisa ngirim lagi ke komponen child di bawahnya lagi. Istilahnya props chain.

Jadi bisa dibilang komponen Child A sia-sia punya prop xyz karena dia sebenernya nggak butuh. Tapi karena Child B perlu prop itu, mau nggak mau Child A harus punya prop xyz. Mungkin kalo strukturnya nggak panjang, cuma ada 2 komponen child, masih okelah. Tapi kalo strukturnya panjang, jadi jelek & ribet sekali. Kita harus nambahin kode yang nggak perlu di banyak komponen sekedar biar bisa transfer prop xyz ke bawah. Alternatifnya, ya pake state-manager seperti Redux. Tapi pake Redux juga jadi beban tersendiri terutama kalo proyeknya nggak terlalu rumit. Bisa-bisa malah over-engineering.

Continue reading →

Controlled Input adalah elemen form yang nilainya (value / state) dikontrol oleh React. Lawannya adalah Uncontrolled Input, state-nya dikontrol oleh elemen itu sendiri seperti normalnya form biasa.

Nilai yang dimasukin ke Controlled Input diproses dulu oleh React (onChange callback) baru inputnya diupdate. Dalam contoh di atas, text yang dimasukin ke text input nggak langsung dipake sebagai input.value tapi dikonversi dulu ke huruf besar oleh handleNameChange. value dari inputnya sendiri baru diset setelah state berubah (setelah setState()).

Jadi Controlled Input dalam contoh di atas cara kerjanya kurang lebih begini: