React.js – List Rendering

If you are building an app, you may sometime have to display a list of items. The objective is to repeat some HTML markup for each of the list items.

1. Using the map() Method
2. Using a Separate Component
3. Working With Keys
4. Index and Key Anti-pattern

1. Using the map() Method

React relies on the JavaScript library for certain operations. One method provided by JavaScript is the map() method.

Let’s take an example. This example uses the map method to display a list of students:

import React from 'react'

function NameList() {
    const students = ['Solace', 'Onyx', 'Trust', 'Praise']
    return (
        <div>
            {
                students.map(student => <h2>{student}</h2>)
            }
        </div>
    )
}

export default NameList

One thing you can do is to move the list rendering logic out of the return statement.

function NameList() {
const students = ['Solace', 'Onyx', 'Trust', 'Praise']
const studentList = students.map(student => <h2>{student}</h2>)
return (
    <div>{studentList} </div>
)
}

2. Using a Separate Component

Sometimes it may be necessary to refactor a list of objects with properties. And we would have to render only few of these properties. It’s better the JSX into a separate component, and then use this separate component in the map method JSX. Let’s take an example. We have a list of student. Each student have 4 properties: id, name, age and country.

import React from 'react'

    function NameList() {

    const students = [
        {
            id: 1,
            name: 'Jadon',
            age: 16,
            country: 'Canada'
        },
        {
            id: 1,
            name: 'Macmills',
            age: 13,
            country: 'Nigeria'
        },
        {
            id: 1,
            name: 'Kumar',
            age: 24,
            country: 'India'
        }      
    ]
    const studentList = students.map(student => 
    <h2>My name is {student.name}. I am {student.age} from {student.country}</h2>)


    return (
        <div>{studentList} </div>
    )
    }

export default NameList

Let’s now use a different component to display each student. We create a component called Student.js as a child component to the NameList component. Then we’ll pass it the Student to display. So, in the NameList component, we have:

const studentList = students.map(student => <Student student={student}></Student>)

Then the Student component will use the props recieved to display the the student data. The Student.js is given below:

import React from 'react'

function Student(props) {
    return (
        <div>
            <h2>My name is {props.student.name}. 
            I am {props.student.age} from {props.student.country}</h2>
        </div>
    )
}

export default Student

So you can see that the Student component is responsible for rendering a Student while the PersonList is rendering the List

3. Working With Keys

Although everything works so far, React requires that each child in the list should have a unique key prop. So a good candidate for the key prop would be the id. We now modify our list to include the id as key.

const studentList = students.map(student => <Student key={student.id} student={student}></Student>)

However, the key prop is not accessible in the child component. The keys help Reach to handle list rendering efficiently.

4. Index as Key Anti-pattern

Sometimes, your list may just not have an id. For example, a random list of names. In this case, React allows you to use an index of an element as it’s key. The arrow function that is passed to the map method receives a second parameter which is the index of the curent element. The code is shown below:

const names = ['Ralujah', 'Jeffrey', 'Jany', 'Adaoma']

const nameList = names.map((name, index) => <h1 key={index}>{index} {name}</h1>)