-

Product List
   
   
   
   
   
   
   
   
   
   
   
   
   
{this.state.products.map((productDetails, i) =>
product = {productDetails} />)}
   
   
Name
Type
Brand
Description
Edit
Delete
View
   
   );
}
In the preceding code, we rendered a product list using a table. We defined a table element of the HTML and also defined a table head for a table
using the
element. But the interesting thing inside the table body is using the element. In the element, we are using another React component,
ProdosTableRow. This ProdosTableRow component will create the table rows. Let’s see the following code for the ProdosTableRow React
component:
   import React, { Component } from ‘react’;
class ProdosTableRow extends Component {
   render() {
   return (
   
   
{this.props.product.name}
   

---

{this.props.product.type}
   
{this.props.product.brand}
   
{this.props.product.description}
   
Edit
   
Delete
   
View
   
   );
   }
}
export default ProdosTableRow;
Here is the complete code to render a product list:
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”
   }
   ]
   };
}
   componentDidMount() {
   fetch(‘ http://localhost:8080/api/products ’, {mode: ‘cors’})
   .then((response) => response.json())
   .then((responseData) => {
   this.setState({
   products: responseData._embedded.products,
   });
   })
   .catch(err => console.error(err));
   }
   render() {
   return (