List Rendering in ReactJS

List rendering in ReactJS refers to the ability to render a list of items dynamically based on data provided by an array or other iterable data source.

Here is an example of how to use list rendering in ReactJS:

Start by defining an array of data to render:

const items = ['item 1', 'item 2', 'item 3'];

In your component’s render method, map over the array of data and return a new array of React elements:
```
render() {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}
```
Note that each element in the array needs a unique key prop. This is important for React to efficiently update the DOM when changes are made to the list.

The resulting output will be a list of items:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

List rendering is a powerful feature of React that allows you to easily render dynamic lists of items. It’s also commonly used when working with APIs and dynamically generating content from external data sources.

Share on Facebook

Save