JSX કોઈપણ JavaScript expression રેન્ડર કરી શકે છે, તેથી શરતી રેન્ડરિંગ માત્ર { } માં ઉપયોગમાં લેવાતો સામાન્ય JS છે।
jsx
() {
(
);
}
JSX કોઈપણ JavaScript expression રેન્ડર કરી શકે છે, તેથી શરતી રેન્ડરિંગ માત્ર { } માં ઉપયોગમાં લેવાતો સામાન્ય JS છે।
() {
(
);
}
cond && <X/> — જ્યારે cond truthy હોય ત્યારે <X/> રેન્ડર કરો, અન્યથા કંઈ નહીં. "દેખાવવું કે છુપાવવું" માટે શ્રેષ્ઠ.cond ? <A/> : <B/> — બે શાખાઓ વચ્ચે પસંદ કરો.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 માં evaluate થાય છે, અને React સંખ્યા 0 રેન્ડર કરે છે (પરંતુ false/null/undefined રેન્ડર કરે નહીં).
જ્યારે logic જટિલ થઈ જાય, તો return કરતાં પહેલે element ગણતરી કરો વાંચનીયતા માટે:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
તે JSX ને સપાટ રાખે છે અને નિર્ણય logic સ્પષ્ટ રાખે છે.