Shartli ko'rsatish - Conditional Rendering

Conditional rendering — bu React’da ma’lumot yoki UI qismlarini holatga (state), propsga yoki boshqa shartlarga qarab ko‘rsatish yoki yashirish usulidir.

Bu oddiy JavaScript’dagi if yoki ? : (ternary) operatorlariga o‘xshaydi.

✅ 1. `if` operatori yordamida:

function Welcome({ isLoggedIn }) { if (isLoggedIn) { return <h2>Xush kelibsiz!</h2>; } return <h2>Iltimos, tizimga kiring.</h2>; }

isLoggedIn true bo‘lsa → birinchi <h2>

Aks holda → ikkinchi <h2> chiqadi

✅ 2. Ternary operator `? :` yordamida:

function Status({ online }) { return ( <p> {online ? '🟢 Onlayn' : '🔴 Oflayn'} </p> ); }

online true bo‘lsa → "🟢 Onlayn"

false bo‘lsa → "🔴 Oflayn" chiqadi

✅ 3. && mantiqiy operator yordamida:

function Notification({ hasMessage }) { return ( <> <h3>Pochtangiz</h3> {hasMessage && <p>📩 Yangi xabaringiz bor!</p>} </> ); }

Agar hasMessage true bo‘lsa — <p> elementi ko‘rsatiladi

Agar false bo‘lsa — hech narsa chiqmaydi

✅ 4. Holatga qarab ko‘rsatish (state bilan):

function ToggleMessage() { const [show, setShow] = useState(false);

return ( <> <button onClick={() => setShow(!show)}> {show ? 'Yashirish' : 'Ko‘rsatish'} Xabar </button> {show && <p>🎉 Salom! Bu xabar chiqdi.</p>} </> ); }

show true bo‘lsa — xabar chiqadi

false bo‘lsa — chiqmaydi

Tugmani bosish bilan show qiymati almashadi

✅ 1. if operatori yordamida:

✅ 2. Ternary operator ? : yordamida:

✅ 3. && mantiqiy operator yordamida:

✅ 4. Holatga qarab ko‘rsatish (state bilan):

✅ 1. `if` operatori yordamida:

✅ 2. Ternary operator `? :` yordamida: