React এ Component এর মধ্যে Props পাঠানো

প্রিয় পাঠক, আজকে আমরা শিখব, React এ Component এর মধ্যে Props পাঠানো। আমরা অনেকে জানিনা, Props কি? React এ Props খুব গুরুত্বপূর্ণ টপিক। টিউটোরিয়ালটি যদি শুরু থেকে শেষ পর্যন্ত দেখেন তাহলে আশা করি আপনারা বুজতে পারবেন React এ Component এর মধ্যে Props কিভাবে পাঠানো যায়।

এক Component থেকে অন্য component এ যোগাযোগ করতে props ব্যবহার করা হয়। props দিয়ে parent component থেকে তথ্য child component এ পাঠানো যায়।  props ‘html’ এর attributes এর মত, props দিয়ে javaScript এর যে কোন value পাঠানো যায়, including object, arrays এবং functions.

সূচিপত্রঃ React এ Component এর মধ্যে Props পাঠানো

• Component এ কিভাবে props পাঠানো যায়
• Component এ কিভাবে props read করা যায়
• Props এর জন্য default value সেট করা
• Component এ jsx পাঠানো
• বিভিন্ন সময়ে props কিভাবে পরিবর্তন হয়

Component এ Props কি?

Props কি? props হলো কিছু তথ্য যা jsx ’tag’ এ pass করা হয়। example below: src, alt, width, height এই কয়েকটি props ’<img>’ tag এ পাঠানো যায়। 

function Avatar (){

return(

<img src="" alt="" width={100} height={200} />

)

}

export default function Profile(){

return(

<Avatar />

)

}

এখানে <img> tag এ যে props পাঠানো হয়েছে এগুলো predefined.(ReactDOM এটার html standard conforms করে) কিন্তু আমরা আমাদের নিজস্ব component এ props পাঠাতে পারি। যেমন <Avatar>

Component এ কিভাবে props পাঠানো যায়

এখানে নিচে লক্ষ্য করুন,Profile component তার child component ’Avatar’ এ কোন props পাঠায়নি।

export default function Profile(){

return(

<Avatar/>

)

}

২ টি ধাপে Avatar কে props দেয়া যায়

ধাপ-১: child component এ props pass করা

প্রথমত, Avatar এ কিছু props pass করব। যেমন: ২টি props pass করছি, person নামে একটি object এবং size নামে একটি number

export default function Profile(){

return(

<Avatar person= {{ name: 'jahir', age:30}} size={100}

)

}

Noteঃ এখানে person={{}} double curly দেয়া হয়েছে, কারণ javaScript লেখার জন্য one pair curly এবং আরেকটি curly pair হলো object এর জন্য। এখন এই 

props গুলো Avatar component এর মধ্যে read করা যাবে। 

ধাপ-২ঃ child component এর মধ্যে props read করা

Parent component থেকে পাঠানো props child component এ লিস্টিং করতে হবে। যেমনঃ 

function Avatar({person,size}){

//code goes here....

} এখানে person এবং size কে component এর ভিতরে variable হিসেবে use করা হয়। এবার উদাহরণটি দেখুনঃ 

export default function Profile(){

return(

<div>

<Avatar age={33} person={{name:'jahir'}} />

<Avatar age={22} person={{name:'juton'}} />

</div>

)

}

উপরে এই উদাহরণে parent component থেকে props পাঠানো হয়েছে। এখন child component এ props use করব। যেমনঃ

function Avatar({person,age}){

return(

<h2>My name is {person.name} and age is {age}</h2>

)

}

Note: Props child component এবং parent component কে স্বাধান রাখে। যখন parent থেকে props কে পরিবর্তন করা হয় তখন child কিভাবে সেটা use করবে তা parent component চিন্তা করার দরকার নাই। 

javaScript function এ যেভাবে argument থাকে, তেমনি props component এর একমাত্র argument, react component একটি মাত্র argument গ্রহণ করে। argument হিসেবে use করলে props হবে একটি object, যেমনঃ

function Avatar (props){

let person = props.person;

let age= props.age;

}

এটাকে destructure করেও লেখা যায় 

function Avatar({person, age}){

code goes here....

}

Props এর জন্য default value সেট করা

Parent component এ যখন props এর কোন value দেয়া না থাকে তখন error যেন না হয়, সেজন্য default value সেট করা যায়। যেমনঃ 

function Avatar({person, size=100}){

other code....

}

এখন যদি props এ size মিস করা হয় অথবা undefined value হয় (size={undefined}) তাহলে default value ব্যবহার হবে। কিন্তু যদি size={null} অথবা size={0} হয়, তাহলে default value ব্যবহার হবেনা।

jsx spread syntax দিয়ে props forward করার নিয়মঃ

ধরুন, কোন একটি component থেকে কিছু props Profile component এ destructure করলাম এবং সেই props গুলো child component এ attribute হিসেবে বা props হিসেবে পাঠানো হয়েছে। যেমন 

function Profile({person, size, isSepia, thickBorder}){

return(

<>

<Avatar person={person} size={size} isSepia={isSepia} thickBorder={thickBorder} />

</>

)

}

এখন এই props গুলোঃ person.size, isSepia, thickBorder এইভাবে সবগুলো না লিখে এইগুলো এইভাবে spread syntax দিয়ে লেখা যায়। যেমনঃ

function Profile(props){

return(

<>

<Avatar {...props} />

</>

)

}

jsx কে children হিসেবে pass করা

আমরা Html Element কে যেভাবে nest করতে পারি, তেমনি component গুলোও nest করে ব্যবহার করতে পারি। যেমনঃ Html কে এভাবে nest করি।

<div>

<h1></h1>

<p></p>

</div>

এভাবে কম্পোনেন্টকে নেস্ট করতে পারি, যেমনঃ

<Card>

<Avatar/>

</Card>

এখানে parent component card <Avatar> component এ যে content থাকবে সেটিকে children props হিসেবে পেয়ে যাবে। যেমনঃ

App.jsx

import Avatar from './Avatar.js';

function Card({children}){

return(

<>

{children}

</>

)

}

export default function Profile(){

return(

<Card>

<Avatar size={100} person={{name:'harun', age: 33}} />

)

}

বিঃদ্রঃ আমাদেরকে মনে রাখতে হবে props সব সময় static থাকেনা, user interactivity ও data পরিবর্তনের উপর নির্ভর করে props dynamicly change হয়। props Immutable হয়। অথ্যাৎ প্রত্যেকবার নতুন নতুন object props হিসেবে আসে।

শিক্ষার্থী বন্ধুরা, দীর্ঘ সময় ধরে আপনারা পড়েছেন  React এ Component এর মধ্যে Props কিভাবে পাঠানো যায়, props কি, Component এ কিভাবে props read করা যায়, Props এর জন্য default value সেট করা, Component এ jsx পাঠানো এবং বিভিন্ন সময়ে props কিভাবে পরিবর্তন হয়।