Outputting List Data
Besides outputting conditional data, you will often work with list data that should be outputted on a page. As mentioned earlier in this chapter, some examples are lists of products, transactions, and navigation items.
Typically, in React apps, such list data is received as an array of values. For example, a component might receive an array of products via props (passed into the component from inside another component that might be getting that data from some backend API):
function ProductsList({products}) {
// … todo!
};In this example, the products array could look like this:
const products = [
{id: 'p1', title: 'A Book', price: 59.99},
{id: 'p2', title: 'A Carpet', price: 129.49},
{id: 'p3', title: 'Another Book', price: 39.99},
];This data can't be outputted like this, though. Instead, the goal is typically to translate it into a list of JSX elements which fits. For example, the...
