Conditional Rendering React: if, Ternary, && dan null

Conditional rendering di React berarti memilih apa yang dikembalikan sebuah komponen dengan JavaScript biasa: pernyataan if sebelum return, ternary cond ? a : b di dalam JSX, atau cond && <Thing /> untuk menampilkan sesuatu atau tidak sama sekali. Tidak ada sintaks template khusus yang perlu dipelajari.

import { useState } from 'react';

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        <div>
            <p>{isLoggedIn ? 'Welcome back, Ada.' : 'Please log in.'}</p>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Log out' : 'Log in'}
            </button>
        </div>
    );
}

Klik tombolnya, dan pesan maupun label-nya berganti, karena setiap ternary memilih string yang berbeda di render berikutnya. Ganti useState(false) menjadi useState(true), dan pratinjau dimulai dalam keadaan sudah login.

Pernyataan if dan early return

Kurung kurawal JSX menerima ekspresi, bukan pernyataan, jadi kamu tidak bisa menulis {if (x) ...} di dalam markup. Kamu bisa menulis if apa pun sebelum return. Saat seluruh tampilan komponen berbeda untuk suatu keadaan (loading, error, kosong), lakukan early return untuk setiap kasus dan simpan markup utama untuk keadaan normal.

import { useState } from 'react';

function Inbox({ status, messages }) {
    if (status === 'loading') {
        return <p>Loading messages...</p>;
    }
    if (status === 'error') {
        return <p style={{ color: 'crimson' }}>Could not load your inbox.</p>;
    }
    if (messages.length === 0) {
        return <p>No messages yet.</p>;
    }
    return (
        <ul>
            {messages.map((m) => (
                <li key={m}>{m}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [status, setStatus] = useState('loading');
    const [messages, setMessages] = useState([]);

    return (
        <div>
            <button onClick={() => setStatus('loading')}>Loading</button>{' '}
            <button onClick={() => setStatus('error')}>Error</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages([]); }}>Empty</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages(['Hi', 'Lunch?']); }}>
                Loaded
            </button>
            <Inbox status={status} messages={messages} />
        </div>
    );
}

Setiap tombol membawa inbox ke keadaan yang berbeda, dan setiap keadaan punya cabangnya sendiri yang pendek dan mudah dibaca. Early return menjaga jalur normal tetap di bagian bawah tanpa nesting.

Ternary di dalam JSX

Saat hanya sebagian kecil markup yang berubah, ternary inline menjaganya tetap menyatu: {isOpen ? <CloseIcon /> : <MenuIcon />}. Ternary cocok untuk dua pilihan. Ternary bersarang untuk tiga pilihan atau lebih cepat menjadi sulit dibaca:

// Hard to follow
{status === 'loading' ? <Spinner /> : status === 'error' ? <ErrorBox /> : <List />}

Saat kamu melihat pola seperti itu, pindahkan logikanya ke rangkaian if sebelum return (seperti di atas) atau ke peta objek (di bagian bawah).

&& dan angka 0 yang nyasar

cond && <Thing /> merender <Thing /> saat cond bernilai truthy dan tidak merender apa pun saat nilainya false. Ini berjalan karena && mengembalikan sisi kirinya saat sisi itu falsy, dan React tidak merender apa pun untuk false, null, dan undefined.

Jebakannya, 0 juga falsy, dan React tetap merender angka. Jadi count && <Badge /> dengan count 0 menaruh angka 0 apa adanya di halaman.

import { useState } from 'react';

export default function App() {
    const [unread, setUnread] = useState(0);

    return (
        <div>
            <p>
                Broken: {unread && <b>{unread} unread</b>}
            </p>
            <p>
                Fixed: {unread > 0 && <b>{unread} unread</b>}
            </p>
            <button onClick={() => setUnread(unread + 1)}>New message</button>{' '}
            <button onClick={() => setUnread(0)}>Mark all read</button>
        </div>
    );
}

Saat tidak ada pesan yang belum dibaca, baris pertama berbunyi "Broken: 0", sedangkan baris kedua tidak menampilkan apa pun setelah "Fixed:". Klik New message, dan keduanya sama; klik Mark all read, dan 0 itu muncul lagi. Solusinya adalah memberi && boolean sungguhan: unread > 0, items.length > 0, atau Boolean(unread). String kosong '' sebenarnya punya masalah yang sama, tetapi ia dirender sebagai sesuatu yang tidak terlihat, jadi jarang kamu sadari.

Mengembalikan null

Sebuah komponen bisa mengembalikan null untuk tidak merender apa pun. Banner peringatan yang hanya muncul saat ada sesuatu yang perlu diperingatkan adalah contoh yang pas: induknya selalu merender <Warning />, dan komponen itu yang memutuskan.

import { useState } from 'react';

function Warning({ message }) {
    console.log('Warning rendered, message =', message);
    if (!message) {
        return null;
    }
    return (
        <p style={{ background: '#fff4d6', padding: 8, borderRadius: 6 }}>{message}</p>
    );
}

export default function App() {
    const [message, setMessage] = useState('');

    return (
        <div>
            <Warning message={message} />
            <button onClick={() => setMessage('Your trial ends tomorrow.')}>Warn</button>{' '}
            <button onClick={() => setMessage('')}>Dismiss</button>
        </div>
    );
}

Perhatikan konsolnya: fungsi Warning mencatat log di setiap render, termasuk saat ia mengembalikan null. Mengembalikan null melewatkan output-nya, bukan pekerjaannya. Hook dan effect-nya tetap berjalan, jadi jika sebuah komponen berat atau memulai sesuatu (timer, subscription), putuskan di induknya dan jangan render komponen itu sama sekali.

Menyimpan JSX di variabel

JSX adalah nilai, jadi kamu bisa menyimpannya di variabel, menyusunnya dengan pernyataan if, dan menaruhnya di markup belakangan. Ini membantu saat satu bagian dari layout yang lebih besar bergantung pada beberapa kondisi.

function Checkout({ cart, user }) {
    let action;
    if (!user) {
        action = <a href="/login">Log in to check out</a>;
    } else if (cart.length === 0) {
        action = <p>Your cart is empty.</p>;
    } else {
        action = <button>Pay now</button>;
    }

    return (
        <section>
            <h2>Your cart</h2>
            {action}
        </section>
    );
}

Memilih di antara beberapa komponen dengan objek

Saat pilihannya adalah "salah satu dari banyak", objek yang memetakan setiap nilai ke sebuah komponen lebih ringkas daripada rangkaian if yang panjang atau switch, dan menambah satu kasus cukup satu baris.

import { useState } from 'react';

function Profile() {
    return <p>Name: Ada Lovelace</p>;
}
function Billing() {
    return <p>Plan: Pro, renews on 1 May</p>;
}
function Security() {
    return <p>Two-factor login is on.</p>;
}

const TABS = { profile: Profile, billing: Billing, security: Security };

export default function App() {
    const [tab, setTab] = useState('profile');
    const Panel = TABS[tab];

    return (
        <div>
            {Object.keys(TABS).map((name) => (
                <button
                    key={name}
                    onClick={() => setTab(name)}
                    style={{ fontWeight: tab === name ? 700 : 400, marginInlineEnd: 6 }}
                >
                    {name}
                </button>
            ))}
            <Panel />
        </div>
    );
}

TABS[tab] memilih sebuah komponen, dan <Panel /> merendernya. Variabelnya harus diawali huruf kapital: JSX menganggap <panel /> sebagai tag HTML. Tambahkan entri notifications ke TABS dengan komponennya sendiri, dan tombol keempat akan muncul.

Menyembunyikan tidak sama dengan tidak merender

Ada dua cara membuat sesuatu menghilang, dan perilakunya berbeda. show && <Counter /> menghapus komponen dari tree saat show bernilai false. React membuatnya unmount dan membuang state-nya, jadi komponen itu mulai dari awal saat muncul lagi. Menyembunyikannya dengan CSS (style={{ display: show ? 'block' : 'none' }}) membuatnya tetap mount, jadi state-nya bertahan.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <p>
            {label}: <button onClick={() => setCount(count + 1)}>{count}</button>
        </p>
    );
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            <label>
                <input type="checkbox" checked={show} onChange={(e) => setShow(e.target.checked)} />
                Show counters
            </label>
            {show && <Counter label="Removed with &&" />}
            <div style={{ display: show ? 'block' : 'none' }}>
                <Counter label="Hidden with CSS" />
            </div>
        </div>
    );
}

Klik kedua counter beberapa kali, hilangkan centang pada kotaknya, lalu centang lagi. Counter pertama kembali ke 0, sedangkan counter kedua masih menyimpan angkanya. Tidak ada yang salah: menghapus tepat untuk form yang harus kosong setiap kali dibuka, menyembunyikan tepat untuk tab yang posisi scroll atau input-nya perlu disimpan. Halaman tentang rendering menjelaskan bagaimana React memutuskan bahwa sebuah komponen adalah komponen yang sama di antara render.

React 19.2 menambahkan pilihan ketiga, <Activity mode="hidden">, yang menyembunyikan child-nya dan mempertahankan state-nya seperti CSS, sekaligus membersihkan effect-nya sampai ditampilkan lagi.

Props dan atribut bersyarat

Kondisi tidak hanya soal elemen mana yang muncul. Prop apa pun bisa menerima nilai hasil perhitungan, jadi ternary atau perbandingan di dalam atribut sering kali sudah cukup:

<button disabled={!canSave} className={hasError ? 'field error' : 'field'}>
    Save
</button>
<input aria-invalid={hasError} placeholder={user ? user.email : 'you@example.com'} />

Saat nilai sebuah prop adalah undefined, React tidak menyertakan atribut itu sama sekali, cara yang rapi untuk menambahkan atribut hanya sesekali: title={isTruncated ? fullText : undefined}. Untuk atribut boolean seperti disabled dan checked, kirim true atau false, dan React akan menambahkan atau menghapusnya.

Kondisi di dalam list

Untuk mengecualikan item dari sebuah list, filter array-nya sebelum melakukan map, alih-alih mengembalikan null dari dalam map. items.filter((i) => i.done).map(...) terbaca sesuai apa yang dilakukannya, dan halaman list dan key menunjukkannya dalam contoh yang bisa dijalankan.