-

Product List for {this.props.name}
   
{products.map((number, index) =>
{number}
)}
   
   
   
   );
   }
}
export default ProdosApp
In the preceding code, we rendered an array of the strings using the map() function of JavaScript. Let’s see the following output:
Figure 8.13: Rendering a product list using the array
Now, we will move one step ahead and use the data as an array of objects, and we can present this data using the table format. An array of
objects is also rendered in the same way as stated earlier, but here we will map the array to the table row and render the data in the table format.
Let’s see the following code:
import React, { Component } from ‘react’;
import ProdosTableRow from ‘./ProdosTableRow’;

---

import ‘./App.css’;
class ProdosTable extends Component {
   constructor(props) {
   super(props);
   this.state = {
   products: [
   {
   name: “Samsung A6 plus”,
   type: “Mobile”,
   description: “Samsung A6 plus is very nice phone with 24mp front camera”,
   brand: “Samsung”
   },
   {
   name: “Sony Bravia KLV-50W662F 50 Inch Full HD”,
   type: “Television”,
   description: “Sony Bravia is full HD tv”,
   brand: “Sony”
   },
   {
   name: “Canon EOS 1500D Digital SLR Camera”,
   type: “DSLR Camera”,
   description: “Best DSLR camera in the market”,
   brand: “Canon”
   }
   ]
   };
   }
   render() {
   return (