array and objects

Array and Object handling in react js

  • Profile picture of Mcs
  • by Mcs July 2, 2025

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

MethodDescriptionExample
.push()Add to end (mutates original array)arr.push(4)
.pop()Remove last itemarr.pop()
.shift()Remove first itemarr.shift()
.unshift()Add to beginningarr.unshift(1)
.map()Create new array by transforming itemsarr.map(x => x * 2)
.filter()Create array with items that match conditionarr.filter(x => x > 5)
.find()Find first item matching conditionarr.find(x => x > 5)
.includes()Check if value existsarr.includes(3)
.some()Returns true if any item matchesarr.some(x => x > 5)
.every()Returns true if all items matcharr.every(x => x > 0)
.reduce()Reduce array to a single valuearr.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

MethodDescriptionExample
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 objectsObject.assign({}, obj1, obj2)
Object.fromEntries()Convert array of pairs to objectObject.fromEntries([['a', 1]])
hasOwnProperty()Check if object has a specific keyobj.hasOwnProperty('name')
delete obj.keyRemove a property from objectdelete obj.age
{ ...obj }Spread syntax to clone or update object{ ...obj, name: 'Bob' }