ReactJS Tutorial – Lists and Keys

The tutorial provides the detail on the usage of Lists and Keys in React application, defining list components, defining keys, extracting components with keys, unique keys with arrays, List example in React, Key example in React

What is List in React ?

List is the way of representing the data in the orderly format using JavaScript. The below given is the simple example of array numbers using JavaScript map( ) function to return the list elements

const numbers = [11, 21, 31, 41, 51];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

The listItems object can be render directly to the DOM as given below

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

Creating the List in React is similar to javascript. List in React uses the javaScript map( ) function for traversing the list element and for list element updates. The defined List Items are enclosed within the curly brackets { } . Use <ul> </ul> for returning the list items. The lsit items can be rendered using reactDOM.render () method.

import React from 'react';
import ReactDOM from 'react-dom';

const groceryList = ['Milk', 'Butter', 'Bread', 'Onions', 'Tomato'];
const groceryItems = groceryList.map((groceryList)=>{
    return <li>{groceryList}</li>;
});
ReactDOM.render(
    <ul> {groceryItems} </ul>,
    document.getElementById('app')
);
List Output using React

Render List within the component

Rendering the list within the component is the ideal way in the React Programming. The below given example depicts the creation and usage of list in the React Component.