Passing Props to a Component

রিয়েক্ট কম্পোনেন্টগুলো Props ব্যবহার করে। একজন অন্যজনের সাথে কমুনিকেট করে। Props এর সাহায্যে প্রত্যেক প্যারেন্ট কম্পোনেন্ট চাইলন্ড কম্পোনেন্ট এ ইনফরমেশন পাঠাতে পারে। এটা HTML attribute এর মতো কিন্তু আমরা props এর মাধ্যমে জাভাস্ক্রিপ্টএর যেকোনো ভেলু যেমন- অ্যারে, অবজেক্ট, ফাংশন পাস করতে পারি।

এই পাঠে আপনারা যা যা শিখবেন

• কিভাবে একটি কম্পোনেন্টে props পাঠানো যায়
• কিভাবে অপর কম্পোনেন্ট থেকে props রিড করা যায়
• কিভাবে props রিড করার সময় default value সেট করা যায়
• কিভাবে js এর spread syntax এর মাধ্যমেও props পাঠানো যায়

আপনার পরিচিত props

props হলো JSX ট্যাগের মধ্যে তথ্য পাস করা। উদাহরণস্বরূপ, className src height width কিছু props যেটা আমরা img ট্যাগের মধ্যে পাস করি।

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}
 
export default function Profile() {
  return <Avatar />;
}

<img> ট্যাগে প্রপ পাঠানোর ক্ষেত্রে কিছু নির্দিষ্ট সীমাবদ্ধতা রয়েছে (ReactDOM HTML স্ট্যান্ডার্ড মেনে চলে)। তবে নিজের তৈরি কম্পোনেন্টগুলি, যেমন <Avatar>, কাস্টমাইজ props পাঠাতে পারেন।