React'te Koşullu Render: if, Ternary, && ve null

React'te koşullu render, bir bileşenin ne döndüreceğini sıradan JavaScript ile seçmek demektir: return'den önce bir if deyimi, JSX içinde bir ternary cond ? a : b, ya da bir şeyi göstermek veya hiçbir şey göstermemek için cond && <Thing />. Öğrenilecek özel bir şablon sözdizimi yoktur.

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>
    );
}

Düğmeye tıkla; hem mesaj hem de etiket değişir, çünkü her ternary bir sonraki render'da farklı bir metin seçer. useState(false) ifadesini useState(true) olarak değiştir; önizleme oturum açık olarak başlar.

if deyimleri ve erken return'ler

JSX süslü parantezleri deyim değil ifade kabul eder, bu yüzden işaretlemenin içine {if (x) ...} yazamazsın. return'den önce istediğin her if'i yazabilirsin. Bileşenin bütün bir durumu farklı göründüğünde (yükleniyor, hata, boş), her durum için erken return yap ve ana işaretlemeyi normal durum için sakla.

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>
    );
}

Her düğme gelen kutusunu farklı bir duruma sokar ve her durumun kendi kısa, okunabilir dalı vardır. Erken return'ler, iç içe yazmadan mutlu yolu en altta tutar.

JSX içinde ternary'ler

İşaretlemenin yalnızca küçük bir kısmı değiştiğinde satır içi bir ternary onu bir arada tutar: {isOpen ? <CloseIcon /> : <MenuIcon />}. Ternary'ler iki seçenek için iyi çalışır. Üç ya da daha fazlası için iç içe ternary'ler hızla okunması zor hâle gelir:

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

Bunu gördüğünde mantığı return'den önce bir if zincirine (yukarıdaki gibi) ya da bir nesne haritasına (aşağıda) taşı.

&& ve başıboş 0

cond && <Thing />, cond truthy olduğunda <Thing />'i, false olduğunda hiçbir şeyi render etmez. Bu, && sol tarafı falsy olduğunda o tarafı döndürdüğü ve React false, null ve undefined için hiçbir şey render etmediği için çalışır.

Tuzak şu: 0 da falsy'dir ve React sayıları render eder. Yani sayı 0 iken count && <Badge /> sayfaya düz bir 0 koyar.

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>
    );
}

Okunmamış mesaj yokken ilk satır "Broken: 0" der, ikincisi ise "Fixed:" sonrasında hiçbir şey göstermez. New message'a tıkla, ikisi aynı şeyi söyler; Mark all read'e tıkla, 0 geri gelir. Çözüm &&'ye gerçek bir boolean vermektir: unread > 0, items.length > 0 ya da Boolean(unread). Boş bir string '' ilke olarak aynı soruna sahiptir, ama görünür hiçbir şey olarak render edildiği için nadiren fark edersin.

null döndürmek

Bir bileşen hiçbir şey render etmemek için null döndürebilir. Yalnızca uyarılacak bir şey olduğunda görünen bir uyarı bandı buna iyi bir örnektir: ebeveyn her zaman <Warning /> render eder, karar ise bileşenindir.

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>
    );
}

Konsolu izle: Warning fonksiyonu, null döndürdüğü render'lar dahil her render'da kayıt yazar. null döndürmek işi değil, çıktıyı atlar. Hook'ları ve efektleri yine çalışır, bu yüzden bir bileşen pahalıysa ya da bir şey başlatıyorsa (bir zamanlayıcı, bir abonelik), kararı ebeveynde ver ve onu hiç render etme.

JSX'i bir değişkende saklamak

JSX bir değerdir, bu yüzden onu bir değişkene atayabilir, if deyimleriyle oluşturabilir ve sonra işaretlemeye koyabilirsin. Bu, daha büyük bir yerleşimin bir parçası birkaç koşula bağlı olduğunda işe yarar.

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>
    );
}

Bir nesneyle birkaç bileşen arasından seçim yapmak

Seçim "birçoğundan biri" olduğunda, her değeri bir bileşene eşleyen bir nesne uzun bir if zincirinden ya da bir switch'ten daha kısadır ve bir durum eklemek tek satırdır.

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] bir bileşen seçer, <Panel /> da onu render eder. Değişken büyük harfle başlamalıdır: JSX <panel />'i bir HTML etiketi olarak ele alır. TABS'a kendi bileşeniyle bir notifications girişi ekle; dördüncü bir düğme belirir.

Gizlemek, render etmemekle aynı şey değil

Bir şeyi kaybettirmenin iki yolu vardır ve farklı davranırlar. show && <Counter />, show false olduğunda bileşeni ağaçtan kaldırır. React onu unmount eder ve state'ini atar, bu yüzden geri geldiğinde sıfırdan başlar. CSS ile gizlemek (style={{ display: show ? 'block' : 'none' }}) onu mount edilmiş tutar, böylece state'i hayatta kalır.

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>
    );
}

İki sayaca da birkaç kez tıkla, kutunun işaretini kaldır, sonra yeniden işaretle. İlk sayaç 0'a dönmüştür, ikincisi ise sayısını hâlâ tutar. İkisi de yanlış değil: kaldırmak her seferinde boş başlaması gereken bir form için doğrudur, gizlemek ise kaydırma konumu ya da girdisi korunması gereken sekmeler için doğrudur. Render sayfası React'in bir bileşenin render'lar arasında aynı bileşen olduğuna nasıl karar verdiğini anlatıyor.

React 19.2 üçüncü bir seçenek ekler: <Activity mode="hidden">; çocuklarını gizler ve CSS gibi state'lerini korur, ayrıca yeniden gösterilene kadar efektlerini temizler.

Koşullu props ve özellikler

Koşullar yalnızca hangi öğelerin göründüğüyle ilgili değildir. Her prop hesaplanmış bir değer alabilir, bu yüzden bir özelliğin içindeki bir ternary ya da karşılaştırma çoğu zaman tek ihtiyacındır:

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

Bir prop'un değeri undefined olduğunda React özelliği tamamen dışarıda bırakır; bu, bir özelliği yalnızca bazen eklemenin temiz bir yoludur: title={isTruncated ? fullText : undefined}. disabled ve checked gibi boolean özellikler için true ya da false aktar, React onları ekler ya da kaldırır.

Listelerde koşullar

Öğeleri bir listenin dışında bırakmak için map içinden null döndürmek yerine diziyi map'lemeden önce filtrele. items.filter((i) => i.done).map(...) yaptığı şey gibi okunur ve listeler ve key'ler sayfası bunu çalışan bir örnekte gösteriyor.