JSX dapat merender expression JavaScript apa pun, jadi conditional rendering hanya merupakan JS normal yang digunakan di dalam { }.
jsx
() {
(
);
}
JSX dapat merender expression JavaScript apa pun, jadi conditional rendering hanya merupakan JS normal yang digunakan di dalam { }.
() {
(
);
}
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasicond && <X/> — render <X/> ketika cond truthy, jika tidak tidak ada apa pun. Sempurna untuk "tampilkan atau sembunyikan".cond ? <A/> : <B/> — pilih di antara dua cabang.null untuk tidak merender apa pun sama sekali.&& dengan angka{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Ini terjadi karena 0 && x dievaluasi menjadi 0, dan React merender angka 0 (tetapi bukan false/null/undefined).
Ketika logika menjadi kompleks, hitung element sebelum return untuk keterbacaan:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Ini membuat JSX tetap flat dan logika keputusan tetap jelas.