6. React Conditional Rendering
📘 কনসেপ্ট (থিওরি)
রিঅ্যাক্টে, আপনি শর্তসাপেক্ষে (conditionally) কম্পোনেন্ট রেন্ডার করতে পারেন।
এটি করার বেশ কয়েকটি উপায় আছে।
- **if স্টেটমেন্ট**: রিটার্ন স্টেটমেন্টের বাইরে সাধারণ জাভাস্ক্রিপ্ট
if স্টেটমেন্ট ব্যবহার করুন।
- **লজিক্যাল && অপারেটর**: আপনি কার্লি ব্রেসে মুড়িয়ে JSX এ এক্সপ্রেশন এমবেড করতে পারেন। শর্তটি সত্য হলে, && এর ঠিক পরের এলিমেন্টটি আউটপুটে দেখা যাবে।
- **টার্নারি অপারেটর**: condition ? trueReturn : falseReturn💡 উদাহরণ
শর্তসাপেক্ষ রেন্ডারিংয়ের উদাহরণ:
function Garage(props) {
const cars = props.cars;
return (
<>
Garage
{cars.length > 0 &&You have {cars.length} cars in your garage.
} {cars.length === 0 ?No cars!
:Vroom vroom
} ); }🎯 আপনার কাজ (প্র্যাকটিস)
props.isOnline নেওয়া একটি কম্পোনেন্ট Status লিখুন। যদি এটি সত্য হয়, তবে Online
Offline
main.react
Loading...
OUTPUT
Run your code to see the output here...