JSX किसी भी JavaScript expression को render कर सकता है, इसलिए conditional rendering बस सामान्य JS है जिसे { } के अंदर उपयोग किया जाता है।
jsx
() {
(
);
}
JSX किसी भी JavaScript expression को render कर सकता है, इसलिए conditional rendering बस सामान्य JS है जिसे { } के अंदर उपयोग किया जाता है।
() {
(
);
}
cond && <X/> — जब cond truthy हो तो <X/> render करें, अन्यथा कुछ नहीं। "दिखाओ या छिपाओ" के लिए बढ़िया।cond ? <A/> : <B/> — दो branches में से चुनें।null return करें।&&{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
ऐसा इसलिए होता है क्योंकि 0 && x का मान 0 होता है, और React संख्या 0 को render करता है (लेकिन false/null/undefined को नहीं)।
जब logic जटिल हो जाए, तो पठनीयता के लिए element को return से पहले compute करें:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
यह JSX को flat और decision logic को स्पष्ट रखता है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें