✅ Lists in ReactJS

In ReactJS, lists are used to display multiple items dynamically using components. Lists can be created using array methods like .map().

📌 1. Rendering Lists Using .map()

You can use the .map() method to iterate over an array and return a component for each item.

Example: Simple List

jsx
<div>      <li>{name} - {age} years old<ul>      {users        .filter(user => user.active)        .map(user => (          <ul>      {fruits.map((fruit, index) => (        <ul className="styled-list">      {items.map((item, index) => (        <li key={index}>{item}</li>      ))}    </ul>  );};export default App;

App.css

css
.styled-list {  list-style-type: none;  padding: 0;}.styled-list li {  background-color: #f0f0f0;  margin: 8px 0;  padding: 10px;  border-radius: 8px;}

✅ Final Thoughts

• Use .map() to render lists efficiently.

• Always use a unique key for list items.

• Use components to create reusable UI.

• Apply filters or conditional rendering as needed.

• Style using className for clean UI.