JSX (JavaScript XML), যা সাধারণত React এর সাথে ব্যবহার করা হয়, ডাইন্যামিক এ্যাট্রিবিউট হ্যান্ডেল করার জন্য কার্লী ব্রেসেস {} এর মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন ব্যবহার করতে হয়। একটি উদাহরণ দেখা যাক –
import React from "react";
const MyComponent = () => {
const dynamicClassName = "my-dynamic-class";
const dynamicValue = true;
return (
<div className={dynamicClassName} disabled={dynamicValue}>
This is a dynamic attribute example
</div>
);
};
export default MyComponent;
উপরিল্লোখিত উদাহরণে, className এ্যাট্রিবিউটটি
dynamically ব্যবহার করার জন্য dynamicClassName ভেরিয়েবল ব্যবহার করা হয়েছে। এবং disabled এ্যাট্রিবিউটটি
dynamic ভ্যালু ভেরিয়েবলের মানের উপর ভিত্তি করে dynamically
সেট করা হয়।
JSX এর যেকোনো এ্যাট্রিবিউট প্রয়োগ করার জন্য জাভাস্ক্রিপ্ট এক্সপ্রেশনটি কার্লী ব্রেসেসের মধ্যে রাখুন {} যেখানে আপনাকে একটি ডাইন্যামিক ভ্যালু সেট করার সুযোগ প্রদান করে। তাছাড়াও কন্ডিশনাল অপারেটর (? :) এবং লজিক্যাল অপারেটরগুলো শর্তসাপেক্ষে এ্যাট্রিবিউট ব্যবহার করা যায়। নিম্নে একটা উদাহরণ দেখা যাক –
import React from 'react';
const MyComponent = () => {
const isDisabled = true;
return (
<button disabled={isDisabled}>
{isDisabled ? 'Disabled' : 'Enabled'}
</button>
);
};
export default MyComponent;
উপরের উদাহরণে, disabled এ্যাট্রিবিউটটি
‘isDisabled’ ভেরিয়েবলের মানের উপর ভিত্তি করে সেট করা হয় এবং বাটনের
টেক্সট কনটেন্ট শর্তশাপেক্ষে রেন্ডার করে।
আশা করি আপনি আজকের এই ব্লগটি মনোযোগ সহকারে পড়েছেন। আজকের ব্লগটি আপনার কাছে কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। পোষ্টে উল্লিখিত কোনো অংশ যদি বুঝতে সমস্যা হয়, তাহলে কমেন্ট বক্সে জানিয়ে দিন। ইনশাআল্লাহ্, সমস্যা সমাধানের চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন ব্লগে। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।[no_toc]
