Latihan 2 dari materi Context API di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah lengkap kecuali isi sapaannya: LanguageContext dengan nilai bawaan "id", state lang di App yang mulai dari "id", Provider yang mengirim lang, dan tombol #switch yang membalik "id" dan "en". Biarkan semuanya.
Isi <p id="greeting"> di Greeting dengan ekspresi di kurung kurawal yang membaca lang:
Kalau lang bernilai "id", tampilkan Halo!
Kalau lang bernilai "en", tampilkan Hello!
Yang dinilai:
Saat pertama tampil, #greeting berbunyi persis Halo!.
Setelah #switch diklik sekali, #greeting berbunyi Hello!.
Setelah #switch diklik dua kali, kembali Halo!.
Isi <p id="greeting"> dimulai dengan ekspresi {...}, bukan teks yang diketik.
Hint
Greeting sudah membaca lang dari context, dan tiap klik #switch mengubah value Provider sehingga Greeting render ulang. Yang kurang cuma memilih teksnya dari nilai lang.
Pakai operator ternary di dalam kurung kurawal: {kondisi ? teksA : teksB}. Kondisinya membandingkan lang dengan "id".