What are lists in ReactJS?
In this shot, we’re going to have a look at the concept of lists in
But, before you read this article any further, you should have a basic understanding of:
- How React works,
- The basics of JavaScript,
- The JavaScript
map()array methodhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map - Basic
propTypesvalidation knowledge - Basic knowledge of
Next.JS https://nextjs.org/
Getting started
We’re going to make use of Next.js for this shot to explain the concepts of lists in React, due to the (many) abstractions that it provides when setting it up.
However, we won’t have to worry about configuring the routes that we want to display in the browser, as this is an out-of-the-box feature in Next.js.
To start making use of Next.js, we’ll need to install it. The command below will get that done for us:
npx create-next-app [your-app-name-here]
The file structure of a next-app is quite different from the one that we get from
|--pages
| |-- _app.js
| |-- index.js
|--src
| |-- components
| | |-- List.js
| | |-- Header.js
| |-- list-items.js
The snippet above represents what our file structure looks like. The only thing new is the src folder containing the components folder and the list-items file.
Originally, the pages folder is available in the structure right from the installation. For the scope of this article, we’re only going to be focusing on the structure provided above. You can check this opinionated
Rendering lists in components
The most common use of lists in React focuses on using it to create a Navigation or Header component on a website/web app. However, it is not limited to that.
Let’s take a look at a typical list component below. But, before we do, let us create an array of list items in src/listitems.js below:
export const bookList = [
{
title: "Atomic Habits",
author: "James Clear"
},
{
title: "The Road to React",
author: "Robin Wieruch"
},
{
title: "Introduction to Flight",
author: "John D. Anderson"
},
{
title: "Flight Dynamics Principles",
author: "Michael V. Cook"
},
{
name: "Flexbox in CSS",
author: "Estelle Weyl"
},
{
name: "JavaScript the Good Parts",
author: "Douglas Crockford"
}
]
export const navItems = [
{
name: "Home",
path: "/"
},
{
name: "About Us",
path: "/about"
},
{
name: "Our Services",
path: "/services"
},
{
name: "Contact Us",
path: "#contact"
}
]
Now that we’ve seen the content of src/list-item.js, let’s go ahead and create our list component in the component folder at src/components/List.js
import React from "react";import { bookList } from '../list-items.js';const List = () => {return (<React.Fragment>{bookList.map((book, index) => {return (<ul key={index}><li>book title: {book.title}</li><li>book author: {book.title}</li></ul>)})}</React.Fragment>)}export default List;
Notice how we used the map() to render the items in the bookList array. What the map() function does is create a new array called book, that we can use to access the properties of the bookList array, and renders it in the highlighted markup on lines 9 through 12.
import React from "react";import { bookList } from '../list-items.js';const List = () => {return (<React.Fragment>{bookList.map((book, index) => {return (<ul key={index}><li>book title: {book.title}</li><li>book author: {book.title}</li></ul>)})}</React.Fragment>)}export default List;
This same process is repeated when we want to create a Header component. Let’s see how we can do that by editing the content of src/components/Header.js.
import React from "react";import { navLinks } from "../list-items.js";import Link from "next/link";const Header = () => {return (<header><div className="brand"><h3> list example</h3></div><nav>{navLinks.map((navItem, index) => {return (<ul><Link href={navItem.path}><li key={index}>{navItem.name}</li></Link></ul>)})}</nav></header>)}export default Header;
For us to be able to see these components in the browser, we have to import them into the index.js file in the pages folder. Let’s see how, below:
import React from "react";
import Header from "../src/components/Header";
import List from "../src/components/List";
export default function Hompage() {
return (
<React.Fragment>
<Header />
<List />
</React.Fragment>
)
}
Passing props to list components in React
Let’s cover how we can create dynamic list components by passing props to them.
We’ll first be refactoring the List component to receive props, and then we’ll perform prop-type validation on the component with the react prop-types module to ensure that the correct data is received by the List component.
import React from "react";import propTypes from "prop-types"const List = ({ items }) => {return (<React.Fragment>{items.map((book, index) => {return (<ul key={index}><li>book title: {book.title}</li><li>book author: {book.title}</li></ul>)})}</React.Fragment>)}export default List;List.propTypes = {items: propTypes.array,}
Did you notice how we performed the prop checks with the “prop-types” module? What we did was assign the item prop to propTypes.array. What this means is that the List component would not receive a property that does not have a data type of an array.
Now, let’s import the refactored list in pages/index.js. We also have to import the list-item.js file in the homepage so that it can be passed as a prop value to the List component.
import React from "react"
import List from "../src/components/List";
import { bookList } from "../src/list-items.js";
export default function Hompage() {
return (
<React.Fragment>
<List item={bookList} />
</React.Fragment>
)
}
Conclusion
It is advisable to always have a unique id that can be passed as value to the key prop when we’re dealing with lists in React, so that React can track changes that are specific to individual items in an array.
