-

Product List for {this.props.name}
   
   
   );
   }
   } export default ProdosTable;
In the updated code of the ProdosTable.js file, we removed the traditional HTML table rendering code, and we are using the ReactTable react
component here. Also, we are using the API
SERVER
URL variable exported from the constants.js file. The code for fetching the products from the
server is very similar to the earlier code.
In the render() method, we defined the columns of the table where an accessor is the field of the car object and the header is the text of the
header. We also enabled filtering by setting the filterable prop of the table to true.
We will start the development server using the npm start command and navigate to the http://localhost:3000/ . Now, the list page looks like the
following screenshot:
Figure 9.8: Using the ReactTable React component
You can see the updated table, which renders the product list using the ReactTable react component.
Using React Skylight
Now, let us update the add product form using the React Skylight React component. First, we will install it using the following command:
npm install react-skylight --save

---

Let’s now update the code of the ProdosForm.js file as shown in the following code snippet:
import React, { Component } from ‘react’;
import SkyLight from ‘react-skylight’;
class ProdosForm extends Component {
   constructor(props) {
   super(props);
   this.state = {id: ‘’, name: ‘’, brand: ‘’,type: ‘’, description: ‘’};
   };
   inputChanged = (event) => {
   this.setState({[event.target.name]: event.target.value});
   };
   handleSubmit = (event) => {
   // code for handle submit button, similar to the previous code
   };
   // Cancel and close modal form
   cancelSubmit = (event) => {
   event.preventDefault();
   this.refs.addDialog.hide();
   }
   render() {
   return (
   
   
   
   //Input fields here, similar to the previous code
   
   
   
   
 this.refs.addDialog.show()}>New Product
   
   
   );
   }
   }

---

export default ProdosForm;
As you can see in the preceding updated code of ProdosForm.js file, we used the ReactSkylight modal form component with buttons and the input
fields that are needed to collect the product data.
Let’s add this ProdosForm.js file to the ProdosTable.js file by importing using the following command:
import ProdosForm from ‘./ProdosForm.js’
Let’s add the ProdosFrom component to the render() method and pass the addProduct and fetchProducts functions as props to the ProdosForm
component that allows us to call these functions from the ProdosForm component. Now, the return statement of the ProdosTable.js file should look
like the following code: