React এর হাতেখড়ি (পর্ব ৪) — Props শিখুন

আগের পর্বে আমরা Component শিখেছিলাম, কিন্তু একটা সমস্যা ছিল — BookCard component তিনবার ব্যবহার করলেও সবগুলো একই বই দেখাচ্ছিল। এই পর্বে আমরা সেই সমস্যা সমাধান করব Props দিয়ে — যেভাবে প্যারেন্ট component চাইল্ড component-এ ডেটা পাঠায়।

Props কী?

Props (Properties-এর সংক্ষেপ) হলো Component-এ ডেটা পাঠানোর মাধ্যম — অনেকটা HTML অ্যাট্রিবিউটের মতো, কিন্তু এখানে যেকোনো ধরনের JavaScript ভ্যালু (স্ট্রিং, সংখ্যা, অবজেক্ট, ফাংশন, এমনকি আরেকটা component) পাঠানো যায়।

// props গ্রহণ করা — ফাংশনের প্যারামিটার হিসেবে
function BookCard(props) {
  return (
    <div className="book-card">
      <h3>{props.title}</h3>
      <p>{props.author}</p>
    </div>
  );
}

// props পাঠানো — HTML অ্যাট্রিবিউটের মতোই
function App() {
  return (
    <div>
      <BookCard title="সোনার তরী" author="রবীন্দ্রনাথ ঠাকুর" />
      <BookCard title="পথের পাঁচালী" author="বিভূতিভূষণ" />
    </div>
  );
}

এখন প্রতিটা <BookCard> ভিন্ন ভিন্ন title আর author দেখাচ্ছে — গত পর্বের সমস্যাটাই এখন সমাধান হয়ে গেল!

props আসলে একটা Object

props হলো একটা সাধারণ JavaScript অবজেক্ট, যেখানে প্রতিটা অ্যাট্রিবিউট একটা key-value জোড়া হয়ে যায়:

<BookCard title="সোনার তরী" author="রবীন্দ্রনাথ ঠাকুর" />

// BookCard-এর ভেতরে props অবজেক্টটা দেখতে এমন হবে:
// {
//   title: "সোনার তরী",
//   author: "রবীন্দ্রনাথ ঠাকুর"
// }

Props Destructuring — পরিষ্কার সিনট্যাক্স

Advanced JS সিরিজে শেখা Destructuring এখানে খুব কাজে লাগে — বারবার props.title, props.author না লিখে, সরাসরি ফাংশনের প্যারামিটারেই destructure করা যায়।

// ❌ verbose — বারবার props. লিখতে হচ্ছে
function BookCard(props) {
  return (
    <div>
      <h3>{props.title}</h3>
      <p>{props.author}</p>
    </div>
  );
}

// ✅ Destructuring দিয়ে — অনেক পরিষ্কার
function BookCard({ title, author }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{author}</p>
    </div>
  );
}

এটাই React কমিউনিটির স্ট্যান্ডার্ড প্র্যাকটিস — Advanced JS পর্ব ৪-এ শেখা const { name, age } = user সিনট্যাক্স এখানে ফাংশন প্যারামিটারেই সরাসরি ব্যবহার হচ্ছে।

Default Props — ডিফল্ট মান

Destructuring-এর সাথে ডিফল্ট মানও দেওয়া যায় (Advanced JS পর্ব ৪-এর আরেকটা টেকনিক) — কোনো prop না দিলে সেই ডিফল্ট মান ব্যবহার হবে।

function BookCard({ title, author, language = "বাংলা" }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{author} — {language}</p>
    </div>
  );
}

// language না দিলেও কাজ করবে, ডিফল্ট "বাংলা" ব্যবহার হবে
<BookCard title="সোনার তরী" author="রবীন্দ্রনাথ ঠাকুর" />

যেকোনো ডেটা টাইপ পাঠানো যায়

প্রপস শুধু স্ট্রিং না — সংখ্যা, বুলিয়ান, অ্যারে, অবজেক্ট, এমনকি ফাংশনও পাঠানো যায়। স্ট্রিং ছাড়া বাকি সবকিছুর জন্য কার্লি ব্রেস { } লাগে।

<BookCard
  title="সোনার তরী"          {/* স্ট্রিং — কোটেশন দিয়ে সরাসরি */}
  pageCount={120}           {/* সংখ্যা — কার্লি ব্রেসে */}
  isAvailable={true}        {/* বুলিয়ান — কার্লি ব্রেসে */}
  tags={["কবিতা", "ক্লাসিক"]}  {/* অ্যারে — কার্লি ব্রেসে */}
  author={{ name: "রবীন্দ্রনাথ", id: 1 }} {/* অবজেক্ট — দুই কার্লি ব্রেস */}
/>

children Prop — একটা বিশেষ prop

একটা component-এর ওপেনিং আর ক্লোজিং ট্যাগের মাঝখানে যা লেখা হয়, সেটা স্বয়ংক্রিয়ভাবে children নামে একটা বিশেষ prop হয়ে যায়।

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h3>এটা children হিসেবে পাঠানো হচ্ছে</h3>
      <p>যেকোনো JSX এখানে বসানো যায়</p>
    </Card>
  );
}

এটা খুব শক্তিশালী প্যাটার্ন — Card component নিজে জানেই না ভেতরে কী থাকবে, শুধু একটা "wrapper" হিসেবে কাজ করে। এভাবে একই Card দিয়ে সম্পূর্ণ ভিন্ন কন্টেন্ট wrap করা যায়।

লাইভ ডেমো — একই Component, ভিন্ন Props

নিচে একই BookCard component তিনবার ব্যবহার হয়েছে, কিন্তু প্রতিবার ভিন্ন props দিয়ে — তাই তিনটা ভিন্ন বই দেখা যাচ্ছে।

একই BookCard কোড, শুধু প্রতিবার ভিন্ন title, author, isAvailable prop।

Props Read-Only — কখনো পাল্টানো যায় না

একটা গুরুত্বপূর্ণ নিয়ম — চাইল্ড component কখনো তার নিজের props সরাসরি পাল্টাতে পারে না। props সবসময় প্যারেন্ট থেকে "শুধু পড়ার জন্য" আসে।

function BookCard({ title }) {
  title = "নতুন নাম"; // ❌ এভাবে props পাল্টানো উচিত না — React রুল ভাঙা হচ্ছে
  return <h3>{title}</h3>;
}

এই নিয়মটা গুরুত্বপূর্ণ কারণ এতে ডেটার প্রবাহ একমুখী (প্যারেন্ট → চাইল্ড) থাকে, যা প্রেডিক্টেবল আর ডিবাগ করা সহজ রাখে। চাইল্ড থেকে প্যারেন্টে ডেটা "ফেরত পাঠাতে" চাইলে ভিন্ন একটা প্যাটার্ন লাগে (callback function দিয়ে), যা আমরা পর্ব ১৪-এ (Lifting State Up) শিখব।

একটা সম্পূর্ণ উদাহরণ — অ্যারে থেকে Props পাঠানো

চলো দেখি কীভাবে ডেটার একটা অ্যারে থেকে প্রতিটা আইটেমের জন্য props পাঠানো যায় — এটাই পরের পর্বগুলোতে (List Rendering) আরও বিস্তারিত দেখব।

function BookCard({ title, author }) {
  return (
    <div className="book-card">
      <h3>{title}</h3>
      <p>{author}</p>
    </div>
  );
}

function App() {
  const books = [
    { id: 1, title: "সোনার তরী", author: "রবীন্দ্রনাথ ঠাকুর" },
    { id: 2, title: "পথের পাঁচালী", author: "বিভূতিভূষণ" }
  ];

  return (
    <div>
      {books.map((book) => (
        <BookCard key={book.id} title={book.title} author={book.author} />
      ))}
    </div>
  );
}

এখানে books.map() ব্যবহার করে অ্যারের প্রতিটা বইয়ের জন্য একটা BookCard তৈরি হচ্ছে, প্রতিটাকে ভিন্ন ভিন্ন props দিয়ে — এখন নতুন বই যোগ করতে হলে শুধু books অ্যারেতে যোগ করলেই চলবে, কোনো নতুন কোড লেখা লাগবে না। (key prop নিয়ে বিস্তারিত পর্ব ৮-এ শিখব।)

নিজে চেষ্টা করো

Exercise:

1. একটা ProfileCard component বানাও যা name, role, skills (অ্যারে) প্রপস নেবে, তারপর ৩ জন ভিন্ন মানুষের জন্য ৩ বার ব্যবহার করো।
2. উপরের BookCard-এ একটা language = "বাংলা" ডিফল্ট prop যোগ করো, একটা কার্ডে ইংরেজি ভাষা পাস করে দেখাও এটা override হচ্ছে।
3. একটা Box component বানাও যেটা children নিয়ে একটা বর্ডারওয়ালা কন্টেইনার বানায়, তারপর ভিন্ন ভিন্ন কন্টেন্ট দিয়ে সেটা তিনবার ব্যবহার করো।
4. উপরের অ্যারে-থেকে-props উদাহরণটা নিজে লিখো, নিজের ৩-৪টা বইয়ের ডেটা দিয়ে।

পরের পর্বে যা থাকছে

এতদিন আমরা স্ট্যাটিক (অপরিবর্তনীয়) ডেটা দেখেছি। পরের পর্বে আমরা শিখব useState Hook — কীভাবে একটা component নিজের ভেতরে ডেটা "মনে রাখতে" আর সময়ের সাথে পাল্টাতে পারে, শুরু হবে একটা কাউন্টার উদাহরণ দিয়ে।