-

Product List for {this.props.name}
   
   
{this.state.product1}
   
{this.state.product2}
   
{this.state.product3}
   
   
   

---

   );
   }
}
export default ProdosApp
As you can see in the preceding JSX code, we used and React components in our ProdosApp React component of our Prodos front-end
application. Let’s refresh the browser and see the following output displayed in the screenshot:
Figure 8.12: Added ProdosHeader and ProdosFooter React components
In the preceding screenshot, we added the header and footer UI components in our React application. Up till now, we have a product list in our
application, so now we will create a React component for our content in the tabular format as discussed earlier.
Handling lists with React and creating a table React component for our Prodos React application
In this section, we will create a content section in a tabular format. We will render data using a list. We have a data list which contains some product
details. We will render this list in a table in the middle section of the web page of the Prodos application. But before we implement a table React
component, we will see how to handle a list with React application.
For list handling, we introduce a new JavaScript method, map(), which is handy when you need to manipulate a list. The map() method creates a
new array with the results of calling a function to each element in the original array.
Let’s see the following array of strings and array of list of products and render these in the ul element:
import React, { Component } from ‘react’;
import ProdosHeader from ‘./ProdosHeader’;
import ProdosFooter from ‘./ProdosFooter’;
class ProdosApp extends Component {
   render() {
const products = [“Samsung A6 Plus”, “iPhone X Plus”, “Vivo V15 Pro”];
return (

---