-

Product List
   //Products will be rendered here
   
   );
   }
}
export default ProdosTable;
You can see the code for the ProdosTable component which is stateful because it will render a product list which will be fetched from the backend
Prodos application.
But before rendering the product list, we need to add the constructor and define one array type state variable that will be used as a state for the
products that were fetched from the REST API ( http://localhost:8080/api/products ). Let’s see the following code that needs to be added to the
ProdosTable React component:
constructor(props) {
   super(props);
   //Define array type state with default with an empty array
   this.state = {
   products: [
   ]
   };
}

---

In the preceding code, we defined a state as products. Initially, this array is an empty array, but you can assign some default values in case of
fallback as shown in the following code:
constructor(props) {
   super(props);
   //Define array type state with default with some products in array
   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”
   }
   ]
   };
}
In the preceding code, we added some products to an array. These products will be rendered if the REST API does not return any response due to
some errors at the server end or anything else. But it is not recommended for each application; you can use it according to your business
application.
Now, it is time to add the fetch() method to call a REST API to fetch a product list from the server instead of rendering the hardcoded default
product list. As we discussed in the lifecycle methods of the React component, we need to add the componentDidMount() lifecycle method to
execute the fetch() method of the Fetch API. Let us see the following code that needs to be added to the ProdosTable React component:
componentDidMount() {
   fetch(‘ http://localhost:8080/api/products ’)

---

   .then((response) => response.json())
   .then((responseData) => {
   this.setState({
   products: responseData._embedded.products,
   });
   })
   .catch(err => console.error(err));
}
In the preceding code, we are fetching the products from the REST API, that is, http://localhost:8080/api/products . The Fetch API internally uses
promise, so the REST API returns data in the JSON format. We are using the then() method of promise. In this method, we have assigned the
response to the responseData object. Finally, we used then() to set a state with a products array type.
The REST API returns a product list as shown in the following code:
   {
   _embedded: {
   products: [
   {
   },
   {
   },
   ..
   ..
   ]
   }
}
You can see the JSON format that is returned by the REST API, so we need to assign a product array (_embedded.products) to the state. That is
why we initialized our state:
this.setState({
   products: responseData._embedded.products,
});
We wrote a code to fetch a product list from the server using a REST API. Now, we need to use the map function to transform the product list
objects into table rows in the render() method. And we also need to add the table element as shown in the following code:
render() {
   return (
   
   

---