Using state to render list items

The data source used to render List components often comes from the state of your component. A collection—usually an array of objects—is mapped to ListItem components. As the objects in this array change, the Material-UI list items change on the screen.

How to do it...

Let's say that you have an array of three objects that you need to display as a list on one of your screens. You can add this array to the state of your component, then map each array item to a ListItem component. Here's the code:

import React, { useState } from 'react';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText...