The map method in React (as in vanilla JavaScript) is used to loop over an array and apply a function to each item in the array. This is particularly useful when rendering lists of elements in React components, as you can generate a set of components from an array of data.
Here's an example of how the map method works in a React component:
map method with variable..
Suppose we have an array of items representing a list of users:
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 },
];
We can use map to render each user as a list item in
a React component:
import React from 'react';
const UserList = () => {
return (
<div>
<h2>User List</h2>
<ul>
{users.map(user => (
<li key={user.id}>
Name: {user.name}, Age: {user.age}
</li>
))}
</ul>
</div>
);
};
export default UserList;
Explanation
users.map: Loops over each user object in the users array.key: React requires a unique key for each element rendered by map.
This helps React identify which items have changed or need to be updated.
Here, we use user.id as the unique key.- JSX inside
map: Each map iteration returns a <li> element with the user details.
Important Points
- Unique Keys:
Always provide a unique key to each element rendered from
map,
as it optimizes rendering and avoids warnings.
- Returning JSX: The
map method should return JSX in each iteration. - Conditional Rendering: You can add conditions inside
map to render
items selectively.
Example with Conditional Rendering
If we only want to display users who are 30 or older:
{users.map(user => (
user.age >= 30 && (
<li key={user.id}>
Name: {user.name}, Age: {user.age}
</li>
)
))}
This will render only users who are 30 or older in the list.
map() method with useState method
When combining the map method with useState in React, you can create
dynamic lists where each item can have its own state or the list
can be updated based on user actions.
Example: Managing a List of Items with map and useState
In this example, we'll use useState to manage a list of users,
allowing us to dynamically add, update, or remove users.
Step 1: Import useState and Initialize State
First, we'll import useState from React and set up our initial list of
users.
import React, { useState } from 'react';
const UserList = () => {
// Initial list of users in state
const [users, setUsers] = useState([
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 },
]);
return (
<div>
<h2>User List</h2>
<ul>
{users.map(user => (
<li key={user.id}>
Name: {user.name}, Age: {user.age}
</li>
))}
</ul>
</div>
);
};
export default UserList;
React js Mapping with react bootstrap
import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
export default function App() {
var [fname,sname] = useState([
{ sname: "ramesh",
cname: "reactjs",
cdes: "the quick brown fox jum sover the lzy dog the quick brown fox jum sover the lzy dog this is dog nothing is "
},
{ sname: "ramesh",
cname: "reactjs",
cdes: "the quick brown fox jum sover the lzy dog the quick brown fox jum sover the lzy dog this is dog nothing is "
},
{ sname: "ramesh",
cname: "reactjs",
cdes: "the quick brown fox jum sover the lzy dog the quick brown fox jum sover the lzy dog this is dog nothing is "
},
{ sname: "ramesh",
cname: "reactjs",
cdes: "the quick brown fox jum sover the lzy dog the quick brown fox jum sover the lzy dog this is dog nothing is "
},
])
return (
<div>
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
{ fname.map((value)=>(
<Card.Body>
<Card.Title>{value.sname}</Card.Title>
<Card.Text>
{value.cdes}
</Card.Text>
<Button variant="primary">{value.cname}</Button>
</Card.Body>
))
}
</Card>
</div>
)
}
