Displaying information in a modal with react-popup

A modal is a dialog box/popup that is displayed over the current window, is suitable for almost all projects. In this recipe, we will learn how to implement a basic modal using the react-popuppackage.

Getting ready

For this recipe, you need to install react-popup. Let's do it with this command:

npm installreact-popup

How to do it...

Using the last recipe's code, we are going to add a basic popup to display information about the person that we registered in the form:

1. Open your App.jsx file and import the Popup object from react-popup. For now, we are going to import Popup.css (the code is too large to put it in here, but you can copy and paste the CSS demo code from the code repository for this project: Chapter03/Recipe3/popup/src/components/Popup.css). Then, after <Footer /> add the <Popup /> component:

import React from 'react';
import Popup from 'react-popup';
import Person from './Person/Person';
import Header from '../shared/components...