Styled Components ব্যবহার করে React-এ শর্তসাপেক্ষ রেন্ডারিং-এ প্রপ্স ব্যবহার
প্রপ্স শর্তসাপেক্ষ রেন্ডারিং-এর জন্যও ব্যবহার করা যেতে পারে।
আমরা আগের পাঠে যে React কম্পোনেন্ট Block নিয়ে কাজ করেছি সেটা নেওয়া যাক।
আমাদের প্রথম ইনপুটটির ব্যাকগ্রাউন্ড হলুদ এবং অন্যান্য ইনপুটগুলির জন্য সবুজ করা যাক।
এটি করতে, Input কম্পোনেন্টের স্টাইলে আরও একটি লাইন যোগ করুন এবং এটি হবে:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
প্রথম ইনপুটটিতে first প্রপ্স যোগ করা যাক:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
পাঠের তত্ত্বে উল্লিখিত শর্তসাপেক্ষ রেন্ডারিং ব্যবহার করে,
আগের পাঠের জন্য টাস্ক সলিউশনের কোডটি পরিবর্তন করুন যাতে
warn প্রপ্স থাকলে বাটনের টেক্সট লাল হয় এবং এর ব্যাকগ্রাউন্ড হলুদ হয়,
আর এটি ছাড়া - সবুজ ব্যাকগ্রাউন্ড এবং সাদা টেক্সট হয়।
দ্বিতীয় বাটনে warn পাস করুন।
