React - Display List

React - Display List

Introduction

One of the most common tasks in web development is to display a list of items on a web page. In React, displaying a list is quite easy and can be done in multiple ways. In this article, we will discuss some of the ways to display a list in React.

Using Simple JavaScript Array

One of the simplest ways to display a list in React is by using a simple JavaScript array. You can create an array of items and then use the map() method to loop through the array and render each item as a separate component. Here's an example:

const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
];

function ItemsList() {
    return (
        <ul>
            {items.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
}

ReactDOM.render(<ItemsList />, document.getElementById("root"));

In this example, we have created an array called "items" which contains three objects with "id" and "name" properties. Then we have created a functional component called "ItemsList" which uses the map() method to loop through the "items" array and render each item as a separate <li> element. We have also assigned a unique "key" prop to each item which is required by React to optimize the rendering.

Using Props

Another way to display a list in React is by passing the list as a prop to a component and then rendering it inside the component. Here's an example:

function ItemsList(props) {
    return (
        <ul>
            {props.items.map(item => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
}

const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
];

ReactDOM.render(<ItemsList items={items} />, document.getElementById("root"));

In this example, we have created a functional component called "ItemsList" which accepts an array of items as a prop. Then we have passed the "items" array to the component as a prop and rendered it inside the component using the map() method.

Using Class Component

Another way to display a list in React is by using a class component. Here's an example:

class ItemsList extends React.Component {
    render() {
        return (
            <ul>
                {this.props.items.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        );
    }
}

const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
];

ReactDOM.render(<ItemsList items={items} />, document.getElementById("root"));

In this example, we have created a class component called "ItemsList" which accepts an array of items as a prop. Then we have passed the "items" array to the component as a prop and rendered it inside the component using the map() method.

Conclusion

In this article, we have discussed some of the ways to display a list in React. You can use a simple JavaScript array, props, or a class component to display a list of items. Choose the method that suits your needs the best.