Lists এবং Arrays রেন্ডার করা

ReactJS-এ Lists এবং Arrays রেন্ডার করা একটি সাধারণ কার্যকলাপ, যেখানে আমরা ডাইনামিকভাবে একাধিক উপাদান (elements) রেন্ডার করার জন্য একটি অ্যারে বা তালিকা ব্যবহার করি। React একাধিক উপাদান রেন্ডার করার জন্য map() ফাংশন ব্যবহার করে, যা একটি অ্যারে বা লিস্ট থেকে প্রতিটি উপাদানকে JSX এ রেন্ডার করে।

এটি বিশেষভাবে উপকারী যখন আমাদের একটি ডেটাবেস থেকে ডেটা এনে বা কোনো ইন্টারঅ্যাকটিভ উপাদান তৈরি করার সময় একাধিক উপাদান প্রদর্শন করতে হয়।

Lists এবং Arrays রেন্ডার করার প্রক্রিয়া

React-এ অ্যারে বা লিস্ট রেন্ডার করতে সাধারণত map() ফাংশন ব্যবহার করা হয়, যা প্রতিটি উপাদানকে একে একে JSX টেমপ্লেটে রেন্ডার করে।

১. একটি অ্যারে রেন্ডার করা

ধরা যাক, আমাদের একটি অ্যারে আছে যা কিছু নাম ধারণ করে। আমরা এই অ্যারে থেকে প্রতিটি নামকে আলাদা আলাদা তালিকা আইটেমে (list item) রেন্ডার করতে চাই।

উদাহরণ:

import React from 'react';

function NameList() {
  const names = ['John', 'Jane', 'Alice', 'Bob'];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

এখানে, names.map() ফাংশনটি names অ্যারের প্রতিটি উপাদানকে লিস্ট আইটেম (<li>) হিসেবে রেন্ডার করছে। প্রতিটি li উপাদানের জন্য একটি ইউনিক key প্রদান করা হয়েছে, যা React-কে ট্র্যাক করতে সাহায্য করে।

• key: React-এ লিস্ট রেন্ডার করার সময় প্রতিটি উপাদানকে এক্সপ্লিসিটলি একটি key প্রপস প্রদান করা উচিত। এটি React-কে জানায় যে কোন উপাদান পরিবর্তিত হয়েছে, যুক্ত হয়েছে বা মুছে গেছে। সাধারণত, আমরা একটি ইউনিক আইডি বা ইনডেক্স ব্যবহার করি।

২. অবজেক্টের অ্যারে রেন্ডার করা

যখন আপনি একটি অ্যারের মধ্যে অবজেক্ট (objects) রাখেন, তখন প্রতিটি অবজেক্টের প্রপার্টি (যেমন নাম, বয়স ইত্যাদি) রেন্ডার করতে পারেন।

উদাহরণ:

import React from 'react';

function UserList() {
  const users = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 22 },
    { id: 3, name: 'Alice', age: 28 }
  ];

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} is {user.age} years old.
        </li>
      ))}
    </ul>
  );
}

এখানে, users.map() ফাংশনটি users অ্যারের প্রতিটি অবজেক্ট থেকে name এবং age প্রপার্টি ব্যবহার করে একটি তালিকা তৈরি করছে। এখানে id প্রপসটি key হিসেবে ব্যবহার করা হয়েছে, কারণ এটি প্রতিটি অবজেক্টের জন্য ইউনিক।

৩. ডাইনামিক অ্যারে রেন্ডার করা

React-এ অ্যারের উপাদানগুলি সাধারণত ডাইনামিকভাবে রেন্ডার করা হয়, যেমন API কল থেকে ডেটা আনা বা ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ডেটা আপডেট করা।

উদাহরণ (ডাইনামিকভাবে অ্যারে রেন্ডার):

import React, { useState, useEffect } from 'react';

function MovieList() {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/movies')
      .then(response => response.json())
      .then(data => setMovies(data));
  }, []); // Empty dependency array means this runs once after mount

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}

এখানে, useEffect হুকটি ব্যবহার করা হয়েছে যা কম্পোনেন্ট মাউন্ট হওয়ার পর একটি API কল করে এবং প্রাপ্ত ডেটা movies স্টেটে সেভ করে। তারপর movies.map() ফাংশনটি প্রতিটি সিনেমার শিরোনাম <li> আইটেমে রেন্ডার করে।

৪. এডিটিং/অপসন রেন্ডারিং

যখন আপনাকে লিস্টে কোনো পরিবর্তন বা অপসন অ্যাড করতে হয়, তখন আপনি React স্টেট ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি লিস্টে আইটেম যোগ করার জন্য:

উদাহরণ:

import React, { useState } from 'react';

function ShoppingList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    if (newItem) {
      setItems([...items, newItem]);
      setNewItem('');
    }
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newItem}
        onChange={e => setNewItem(e.target.value)}
      />
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

এখানে, useState হুকটি ব্যবহৃত হয়েছে লিস্টের আইটেম এবং নতুন আইটেম ইনপুট স্টেট ম্যানেজ করতে। নতুন আইটেম যোগ করতে addItem ফাংশন ব্যবহার করা হচ্ছে, যা ইন্টারফেসে নতুন আইটেম দেখাবে।

উপসংহার

ReactJS-এ Lists এবং Arrays রেন্ডার করা অত্যন্ত সহজ, এবং এটি React এর শক্তিশালী ফিচারের একটি অংশ। আপনি map() ফাংশন ব্যবহার করে অ্যারে বা লিস্ট থেকে ডাইনামিক্যালি UI রেন্ডার করতে পারেন। সাথে key প্রপস ব্যবহার করে প্রতিটি উপাদানকে ইউনিকভাবে চিহ্নিত করা React-এর জন্য খুবই গুরুত্বপূর্ণ, কারণ এটি কম্পোনেন্ট রি-রেন্ডারিংকে অপটিমাইজ করে।