JSX Syntax পাঠে উল্লেখ করা হয়েছিল যে { }-এর ভেতরে শুধু এক্সপ্রেশন কাজ করে, if-এর মতো স্টেটমেন্ট নয়। এই পাঠে সেই এক্সপ্রেশন-ভিত্তিক প্যাটার্ন দেখানো হবে যা React আসলে কন্টেন্ট দেখাতে বা লুকাতে ব্যবহার করে।
"এটা রেন্ডার করো, বা কিছুই না" -এর সবচেয়ে সাধারণ প্যাটার্ন — JavaScript পাঠের একই short-circuit আচরণের উপর নির্ভর করে: বাম পাশ falsy হলে, JavaScript ডান পাশ একদমই মূল্যায়ন করে না:
function Notification({ hasUnread }) {
return (
<div>
{hasUnread && <span className="badge">New!</span>}
</div>
);
}0 && ফাঁদ
{count && ...} একটি আসল, সাধারণ বাগ: count যদি 0 হয়, React পাতায় আক্ষরিক সংখ্যা 0 রেন্ডার করে, কারণ 0 falsy কিন্তু তবুও একটি মান যা React রেন্ডার করতে জানে — এটা কিছুই রেন্ডার না করার মতো নয়। আগে একটি প্রকৃত boolean-এ রূপান্তর করুন: {count > 0 && ...}।
একটি either/or পছন্দের জন্য — "কিছু অথবা কিছুই না" নয় — JavaScript Control Flow পাঠ-এর ternary হলো প্রচলিত টুল:
function LoginButton({ isLoggedIn }) {
return isLoggedIn ? <button>Log out</button> : <button>Log in</button>;
}বেশি জটিল লজিকের জন্য, কম্পোনেন্ট ফাংশন থেকে পুরোপুরি আগেই রিটার্ন করা প্রায়ই নেস্টেড ternary-র চেয়ে বেশি পরিষ্কার:
function UserGreeting({ user }) {
if (!user) {
return <p>Please log in.</p>;
}
return <h1>Welcome back, {user.name}!</h1>;
}একটি কম্পোনেন্ট থেকে null রিটার্ন করলে একদমই কিছু রেন্ডার হয় না — কোনো খালি <div> নয়, DOM-এ কিছুই নেই:
function Warning({ show, message }) {
if (!show) return null;
return <p className="warning">{message}</p>;
}