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/layout/Header';
  import Content from '../shared/components/layout/Content';
  import Footer from '../shared/components/layout/Footer';
  import './App.css';
  import './Popup.css';

  const App = () => (
    <div className="App">
      <Header title="Personal Information" />

      <Content>
        <Person />
      </Content>

      <Footer />

      <Popup />
    </div>
  );

  export default App;

2. Now, in our Person.js file, we need to include the popup as well:

import React, { Component } from 'react';
import Popup from 'react-popup';
import './Person.css';

3. Let's modify our handleOnSubmit method to implement the popup. First, we need to validate that we are receiving at least the firstName, lastName, and email (phone will be optional). If we get all the necessary information, then we will create a popup and display the user's information. One of the things I like about react-popup is that it allows us to use JSX code in its content:

  handleOnSubmit = e => {
    e.preventDefault();

    const {
      firstName,
      lastName,
      email,
      phone
    } = this.state;

    // If firstName or lastName is missing we add an error class
    this.setState({
      errors: {
        firstName: firstName === '',
        lastName: lastName === ''
      }
    });
    
    // We will display the popup just if the data is received...
    if (firstName !== '' && lastName !== '' && email !== '') {
      Popup.create({
        title: 'Person Information',
        content: (
          <div>
            <p><strong>Name:</strong> {firstName} {lastName}</p>
            <p><strong>Email:</strong> {email}</p>
            {phone && <p><strong>Phone:</strong> {phone}</p>}
          </div>
        ),
        buttons: {
          right: [{
            text: 'Close',
             action: popup => popup.close() // Closes the popup                                                                                                       
          }],
        },
      });
    }
  }