ZetCode

React.js list

last modified July 13, 2020

React.js list tutorial shows how to render HTML lists in React.js.

React.js

React.js is a declarative, component-based JavaScript library for building user interfaces. React.js allows to build encapsulated components that manage their own state. These components can be used to create complex UIs.

A list is a collection of ordered or unordered items.

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

The following examples use this home page. The components are rendered into the root <div> tag. 

$ npx create-react-app myapp
$ cd myapp

A new React application is created with the create-react-app tool. 

$ npm start

We start the development server and navigate to the localhost:3000 to see the output.

React.js list simple example

In the first example, we have a very simple React application which renders a list.

index.js
import React from 'react';
import ReactDOM from 'react-dom';

const words = ['sky', 'blue', 'falcon', 'wood', 'cloud'];
const items = words.map((word, idx) => {
    return <li key={idx}>{word}</li>;
});

console.log(items);

ReactDOM.render(
    <ul> {items} </ul>,
    document.getElementById('root')
);

The example displays a list of words. 

const words = ['sky', 'blue', 'falcon', 'wood', 'cloud'];

We have a list of words. 

const items = words.map((word, idx) => {
    return <li key={idx}>{word}</li>;
});

With the map() function, we create an array of <li> elements. The key attribute is neccessary for React to identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. 

ReactDOM.render(
    <ul> {items} </ul>,
    document.getElementById('root')
);

The list is rendered inside the render() function. The {} brackets are used to render the array of elements.

React.js functional list component

In the next example, we create a simple functional list component.

App.js
import React from 'react';

function WordList(props) {

    const words = props.words;
    const items = words.map((word, idx) =>
        <li key={idx}>{word}</li>
    );

    return (
        <div>
            <h2>Rendering a list inside component</h2>
            <ul>{items}</ul>
        </div>
    );
}

export default WordList;

The WordList is a functional React list component. It renders a list of words. The words are passed to the component as props. 

function WordList(props) {

The words are passed a function props argument.

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import WordList from './App';

const words = ['sky', 'blue', 'falcon', 'falcon', 'wood', 'cloud'];

ReactDOM.render(
    <WordList words={words} />,
    document.getElementById('root')
);

In the index.js file, we import the WordList component and render it. 

import WordList from './App';

The WordList component is imported. 

const words = ['sky', 'blue', 'falcon', 'falcon', 'wood', 'cloud'];

A list of words is defined. 

ReactDOM.render(
    <WordList words={words} />,
    document.getElementById('root')
);

The words are passed to the WordList component when being rendered.

React.js list of objects example

The next example renders a list of objects.

App.js
import React from 'react';

const users = [
    {
        id: 1,
        name: 'Robin Williams',
        occupation: 'teacher',
    },
    {
        id: 2,
        name: 'John Doe',
        occupation: 'gardener',
    },
];

const WordList = () => (
    <ul>
        {users.map(user => (
            <li key={user.id}>
                <div>{user.id}</div>
                <div>{user.name}</div>
                <div>{user.occupation}</div>
            </li>
        ))}
    </ul>
);

export default WordList;

The component contains a list of user objects. 

{users.map(user => (
    <li key={user.id}>
        <div>{user.id}</div>
        <div>{user.name}</div>
        <div>{user.occupation}</div>
    </li>
))}

The map() function creates a <li> for each of the users.

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import WordList from './App';

ReactDOM.render(<WordList />, document.getElementById('root'));

The WordList component is imported and rendered.

In this tutorial, we have worked with lists in a React application.

List all React.js tutorials.