
Array and Object handling in react js
In React, arrays and objects are essential for: Storing and displaying data, Managing state with useState, Building dynamic and reusable UI components.
1. Arrays in React
An array holds multiple values and is often used to render lists in JSX
Example: Rendering an Array
function FruitList() {
const fruits = ['Apple', 'Banana', 'Mango'];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li> // Always use a unique key!
))}
</ul>
);
}
Using Arrays in State
import { useState } from 'react';
function TodoApp() {
const [todos, setTodos] = useState(['Learn React', 'Build UI']);
const addTodo = () => {
setTodos([...todos, 'New Task']); // Add new item immutably
};
return (
<>
{todos.map((todo, i) => <p key={i}>{todo}</p>)}
<button onClick={addTodo}>Add</button>
</>
);
}
2. Objects in React
Objects store data in key-value pairs and are used for: Storing single items with multiple properties, Managing form inputs, Passing structured props to components
Example: Access Object Data
function UserCard() {
const user = {
name: 'Alice',
age: 25,
location: 'Delhi'
};
return (
<div>
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
<p>Location: {user.location}</p>
</div>
);
}
Updating Object in State
import { useState } from 'react';
function ProfileEditor() {
const [profile, setProfile] = useState({ name: 'John', age: 30 });
const increaseAge = () => {
setProfile({ ...profile, age: profile.age + 1 });
};
return (
<>
<p>{profile.name} is {profile.age} years old</p>
<button onClick={increaseAge}>Increase Age</button>
</>
);
}
Array and Object Available methods
Array Methods
Method | Description | Example |
---|---|---|
.push() | Add to end (mutates original array) | arr.push(4) |
.pop() | Remove last item | arr.pop() |
.shift() | Remove first item | arr.shift() |
.unshift() | Add to beginning | arr.unshift(1) |
.map() | Create new array by transforming items | arr.map(x => x * 2) |
.filter() | Create array with items that match condition | arr.filter(x => x > 5) |
.find() | Find first item matching condition | arr.find(x => x > 5) |
.includes() | Check if value exists | arr.includes(3) |
.some() | Returns true if any item matches | arr.some(x => x > 5) |
.every() | Returns true if all items match | arr.every(x => x > 0) |
.reduce() | Reduce array to a single value | arr.reduce((a, b) => a + b) |
.forEach() | Loop through items (no return) | arr.forEach(x => console.log(x)) |
.sort() | Sort array items (alphabetically or with function) | arr.sort() / arr.sort((a, b) => a - b) |
Object Methods
Method | Description | Example |
---|---|---|
Object.keys(obj) | Get all keys as array | ['name', 'age'] |
Object.values(obj) | Get all values as array | ['Alice', 25] |
Object.entries(obj) | Get key-value pairs as array | [['name', 'Alice'], ['age', 25]] |
Object.assign() | Copy/merge objects | Object.assign({}, obj1, obj2) |
Object.fromEntries() | Convert array of pairs to object | Object.fromEntries([['a', 1]]) |
hasOwnProperty() | Check if object has a specific key | obj.hasOwnProperty('name') |
delete obj.key | Remove a property from object | delete obj.age |
{ ...obj } | Spread syntax to clone or update object | { ...obj, name: 'Bob' } |