# ReactJS Array & Objects

ReactJS application তৈরি করার সময় **Array** এবং **Object** সবচেয়ে বেশি ব্যবহৃত JavaScript data structures-এর মধ্যে অন্যতম।

Products, users, posts, orders, categories কিংবা API থেকে আসা data সবকিছুই সাধারণত Array এবং Object-এর মাধ্যমে manage করা হয়।

এই tutorial-এ আমরা শিখব:

*   Array কী এবং React-এ কীভাবে ব্যবহার করতে হয়
    
*   Object কী এবং কীভাবে data access করতে হয়
    
*   Array of Objects কী
    
*   `map()` দিয়ে data render করা
    
*   `filter()` এবং `find()` ব্যবহার
    
*   React State-এর মধ্যে Array/Object manage করা
    
*   Add, Update এবং Delete করা
    
*   API data নিয়ে কাজ করা
    

## What is an Array?

Array হলো একাধিক value একসাথে রাখার একটি JavaScript data structure।

```javascript
const fruits = ["Apple", "Mango", "Banana", "Orange"];
```

Array-এর প্রতিটি item-এর একটি index থাকে এবং index `0` থেকে শুরু হয়।

```javascript
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Mango
console.log(fruits[2]); // Banana
```

### Output

```text
Apple
Mango
Banana
```

* * *

## Using Array in React

React component-এর মধ্যে আমরা Array রাখতে পারি।

```jsx
function App() {
  const fruits = ["Apple", "Mango", "Banana"];

  return (
    <div>
      <h1>Fruits</h1>

      <p>{fruits[0]}</p>
      <p>{fruits[1]}</p>
      <p>{fruits[2]}</p>
    </div>
  );
}

export default App;
```

তবে Array-এ যদি অনেকগুলো item থাকে, তাহলে প্রতিটি item আলাদাভাবে লেখা practical নয়।

এক্ষেত্রে আমরা `map()` ব্যবহার করি।

* * *

## Rendering Array with `map()`

React-এ Array থেকে dynamic UI তৈরি করার জন্য `map()` খুব গুরুত্বপূর্ণ।

```jsx
function App() {
  const fruits = ["Apple", "Mango", "Banana"];

  return (
    <div>
      <h1>Fruit List</h1>

      {fruits.map((fruit) => (
        <p key={fruit}>{fruit}</p>
      ))}
    </div>
  );
}

export default App;
```

এখানে `map()` Array-এর প্রতিটি item-এর জন্য একটি `<p>` element তৈরি করছে।

### Output

```text
Fruit List

Apple
Mango
Banana
```

* * *

## Why Do We Use `key`?

React-এ list render করার সময় প্রতিটি element-এর জন্য একটি unique `key` দেওয়া উচিত।

```jsx
{fruits.map((fruit) => (
  <p key={fruit}>{fruit}</p>
))}
```

যদি data-এর মধ্যে unique `id` থাকে, তাহলে `id` ব্যবহার করা সবচেয়ে ভালো।

```jsx
{products.map((product) => (
  <div key={product.id}>
    {product.name}
  </div>
))}
```

`key` React-কে list-এর item পরিবর্তন, যোগ বা remove হওয়ার বিষয়গুলো efficiently track করতে সাহায্য করে।

## What is an Object?

Object হলো related data-কে **key-value pair** আকারে রাখার একটি JavaScript structure।

```javascript
const user = {
  name: "Shihab",
  age: 28,
  role: "Developer"
};
```

এখানে:

```text
name → Shihab
age  → 28
role → Developer
```

প্রতিটি key একটি নির্দিষ্ট value-এর সাথে যুক্ত।

## Accessing Object Data

Object-এর data access করার সবচেয়ে common পদ্ধতি হলো dot notation।

```jsx
function App() {
  const user = {
    name: "Shihab",
    age: 28,
    role: "Developer"
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
      <p>Role: {user.role}</p>
    </div>
  );
}

export default App;
```

এখানে:

```javascript
user.name
user.age
user.role
```

দিয়ে Object-এর বিভিন্ন property access করা হয়েছে।

## Array of Objects

Real-world React application-এ সবচেয়ে common structure গুলোর একটি হলো **Array of Objects**।

উদাহরণ:

```javascript
const products = [
  {
    id: 1,
    name: "Laptop",
    price: 800
  },
  {
    id: 2,
    name: "Phone",
    price: 500
  },
  {
    id: 3,
    name: "Keyboard",
    price: 50
  }
];
```

এখানে:

*   `products` হলো Array
    
*   প্রতিটি product হলো Object
    
*   `id`, `name`, `price` হলো Object properties
    

* * *

## Rendering Array of Objects

এখন আমরা এই product data React UI-তে render করতে পারি।

```jsx
function App() {
  const products = [
    {
      id: 1,
      name: "Laptop",
      price: 800
    },
    {
      id: 2,
      name: "Phone",
      price: 500
    },
    {
      id: 3,
      name: "Keyboard",
      price: 50
    }
  ];

  return (
    <div>
      <h1>Products</h1>

      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>Price: ${product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default App;
```

এটি React-এর একটি গুরুত্বপূর্ণ pattern:

```text
Array
   ↓
map()
   ↓
Object
   ↓
React Component
   ↓
UI
```

## Object Destructuring

Object থেকে সহজে property বের করার জন্য destructuring ব্যবহার করা যায়।

```javascript
const user = {
  name: "Shihab",
  age: 28
};

const { name, age } = user;

console.log(name);
console.log(age);
```

React Props-এর ক্ষেত্রেও এটি খুব common।

```jsx
function User({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}
```

## Array Destructuring

Array থেকেও destructuring করা যায়।

```javascript
const colors = ["Red", "Green", "Blue"];

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);
```

React-এর `useState()`\-এও আমরা Array destructuring ব্যবহার করি।

```jsx
const [count, setCount] = useState(0);
```

এখানে:

*   `count` → current state value
    
*   `setCount` → state update function
    

## Filtering Array with `filter()`

কোনো condition অনুযায়ী data নির্বাচন করতে `filter()` ব্যবহার করা হয়।

ধরুন আমরা শুধু $500-এর বেশি দামের product চাই।

```javascript
const products = [
  { id: 1, name: "Laptop", price: 800 },
  { id: 2, name: "Phone", price: 500 },
  { id: 3, name: "Keyboard", price: 50 }
];

const expensiveProducts = products.filter(
  (product) => product.price > 500
);
```

এখন `expensiveProducts`\-এ শুধু Laptop থাকবে।

React-এ:

```jsx
{expensiveProducts.map((product) => (
  <p key={product.id}>
    {product.name} - ${product.price}
  </p>
))}
```

## Finding Data with `find()`

একটি নির্দিষ্ট Object খুঁজে বের করতে `find()` ব্যবহার করা যায়।

```javascript
const products = [
  { id: 1, name: "Laptop" },
  { id: 2, name: "Phone" },
  { id: 3, name: "Keyboard" }
];

const product = products.find(
  (product) => product.id === 2
);

console.log(product);
```

Result:

```javascript
{
  id: 2,
  name: "Phone"
}
```

## Array in React State

React application-এ Array অনেক সময় state হিসেবে ব্যবহার করা হয়।

```jsx
import { useState } from "react";

function App() {
  const [products, setProducts] = useState([]);

  return (
    <div>
      <h1>Products</h1>
    </div>
  );
}

export default App;
```

এখানে `products` হলো state এবং initially এটি একটি empty Array।

## Adding Data to a State Array

React state সরাসরি modify করা উচিত নয়।

❌ Avoid:

```javascript
products.push(newProduct);
```

এর পরিবর্তে নতুন Array তৈরি করে state update করুন।

```javascript
setProducts([
  ...products,
  newProduct
]);
```

Example:

```jsx
const addProduct = () => {
  const newProduct = {
    id: 4,
    name: "Mouse",
    price: 30
  };

  setProducts([
    ...products,
    newProduct
  ]);
};
```

এখানে spread operator পুরনো products-এর সাথে নতুন product যোগ করছে।

## Deleting Data

`filter()` ব্যবহার করে Array থেকে কোনো Object delete করা যায়।

```jsx
const deleteProduct = (id) => {
  setProducts(
    products.filter(
      (product) => product.id !== id
    )
  );
};
```

Button:

```jsx
<button onClick={() => deleteProduct(product.id)}>
  Delete
</button>
```

এখানে matching `id`\-এর product বাদ দিয়ে নতুন Array তৈরি করা হচ্ছে।

## Updating an Object

Array-এর ভিতরে থাকা Object update করার জন্য `map()` এবং spread operator ব্যবহার করা যায়।

```jsx
const updatePrice = (id) => {
  setProducts(
    products.map((product) =>
      product.id === id
        ? { ...product, price: 100 }
        : product
    )
  );
};
```

এই অংশটি:

```javascript
{ ...product, price: 100 }
```

পুরনো Object-এর data রেখে শুধু `price` পরিবর্তন করছে।

## Nested Objects

একটি Object-এর ভিতরে আরেকটি Object থাকতে পারে।

```javascript
const user = {
  name: "Shihab",
  address: {
    city: "Dhaka",
    country: "Bangladesh"
  }
};
```

React-এ:

```jsx
<h2>{user.name}</h2>
<p>{user.address.city}</p>
<p>{user.address.country}</p>
```

## Array Inside an Object

Object-এর property হিসেবে Array রাখা যায়।

```javascript
const user = {
  name: "Shihab",
  skills: [
    "Laravel",
    "React",
    "Vue"
  ]
};
```

React-এ skills render:

```jsx
{user.skills.map((skill) => (
  <span key={skill}>
    {skill}{" "}
  </span>
))}
```

## Nested Array and Object

Real-world application-এ data আরও complex হতে পারে।

```javascript
const users = [
  {
    id: 1,
    name: "Shihab",
    skills: [
      "Laravel",
      "React",
      "Vue"
    ]
  },
  {
    id: 2,
    name: "Rahim",
    skills: [
      "PHP",
      "MySQL"
    ]
  }
];
```

এখানে একটি Array-এর মধ্যে Object এবং Object-এর মধ্যে আবার Array রয়েছে।

React-এ:

```jsx
{users.map((user) => (
  <div key={user.id}>
    <h2>{user.name}</h2>

    {user.skills.map((skill) => (
      <span key={skill}>
        {skill}{" "}
      </span>
    ))}
  </div>
))}
```

## Working with API Data

React application-এ API থেকে JSON data পাওয়া খুব common।

Example:

```json
[
  {
    "id": 1,
    "name": "Laptop",
    "price": 800
  },
  {
    "id": 2,
    "name": "Phone",
    "price": 500
  }
]
```

এই data পাওয়ার পর আমরা `map()` ব্যবহার করে UI তৈরি করতে পারি।

```jsx
{products.map((product) => (
  <div key={product.id}>
    <h2>{product.name}</h2>
    <p>${product.price}</p>
  </div>
))}
```

এই pattern API-driven React application-এ প্রতিদিন ব্যবহার করা হয়।

## Important Array Methods

React developer হিসেবে নিচের JavaScript Array methodsগুলো জানা খুব গুরুত্বপূর্ণ:

| Method | কাজ |
| --- | --- |
| `map()` | প্রতিটি item থেকে নতুন output তৈরি |
| `filter()` | Condition অনুযায়ী data নির্বাচন |
| `find()` | নির্দিষ্ট item খোঁজা |
| `findIndex()` | Item-এর index খোঁজা |
| `some()` | কোনো item condition পূরণ করে কিনা |
| `every()` | সব item condition পূরণ করে কিনা |
| `includes()` | কোনো value আছে কিনা |
| `reduce()` | একাধিক value থেকে একটি result তৈরি |
| `sort()` | Data সাজানো |

## Practical React Example

এখন Array, Object এবং State একসাথে ব্যবহার করে একটি ছোট Product List তৈরি করি।

```jsx
import { useState } from "react";

function App() {
  const [products, setProducts] = useState([
    {
      id: 1,
      name: "Laptop",
      price: 800
    },
    {
      id: 2,
      name: "Phone",
      price: 500
    }
  ]);

  const addProduct = () => {
    const product = {
      id: 3,
      name: "Mouse",
      price: 30
    };

    setProducts([
      ...products,
      product
    ]);
  };

  return (
    <div>
      <h1>Product List</h1>

      <button onClick={addProduct}>
        Add Product
      </button>

      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>Price: ${product.price}</p>
        </div>
      ))}
    </div>
  );
}

export default App;
```

এই example-এ আমরা ব্যবহার করেছি:

*   Array
    
*   Object
    
*   Array of Objects
    
*   `map()`
    
*   `useState()`
    
*   Spread Operator
    
*   Dynamic Rendering
    
*   React `key`
    

ReactJS-এ **Array এবং Object** খুবই গুরুত্বপূর্ণ কারণ প্রায় প্রতিটি real-world application-এ dynamic data এগুলোর মাধ্যমে manage করা হয়।

বিশেষ করে:

**Array → Object → Array of Objects →** `map()` **→** `filter()` **→** `find()` **→ State → Add → Update → Delete → API**

এই conceptsগুলো ভালোভাবে বুঝতে পারলে ReactJS-এর **Props, State, API Integration এবং CRUD Application** শেখা অনেক সহজ হয়ে যাবে।