-

Product List for {this.props.name}
       
Refresh the web browser and see the following updated UI:
Figure 9.9: Adding the New Product button
As you can see in the preceding screenshot, there is a button named New Product . When you click on this button, it opens the modal form as
shown in the following screenshot:
Figure 9.10: Adding the New Product Form with the Skylight React Component
You can see the updated product form with the Skylight React component.

---

Using the Toast message React component
You can also use the React-toastify component to generate a feedback message for any deletion or creation of the product. Let us install the
React-toastify component using the following command:
npm install react-toastify --save
Let’s implement the toast messages with the delete functionality. We need to import ToastContainer, toast, and the style sheet to start using
React-toastify. Let’s add the following import code to the ProdosTable.js file:
import { ToastContainer, toast } from ‘react-toastify’;
import ‘react-toastify/dist/ReactToastify.css’;
In the preceding code, we imported the ToastContainer container toast from React-toastify. The ToastContainer container is the component for
showing toast messages. We need to define ToastContainer inside the render() method as shown in the following code:
return (