How do I stop the parent from completely re-rendering but still have the child re-render based on a change in "state'?

Question

I have a typical customer form that I want the user to review before they submit their information. My thoughts are to have the user click a "submit information" button at the bottom of the form which brings up a pop-up window that summarizes the input data. This pop-up window sits over the original form and includes "submit" and "edit" buttons. The "submit" button sends the information to my backend server and closes the pop-up window, while the "edit" button closes the pop-up window and allows the user to make changes to the information in the customer form.

In the parent component, I have "state" variables that include the information in the form ("contact") and also whether or not the pop-up window should be shown ("initialSubmit").

The value of "initialSubmit" is passed to the Modal (i.e. the pop-up window) via the "show" prop and tells it to either show or hide the pop-up window.

When I click the "submit information" button, "initialSubmit" is changed to "true" and the pop-up window does appear.

However, the application almost immediately re-renders and changes "initialSubmit" back to "false" causing the pop-up window to dissappear.

I have thought about using "shouldComponentUpdate" to stop re-rendering if the value of "initialSubmit" has changed. However, my code below throws an error.

I don't even know if using a "state" variable is the correct way to control the visibility of a pop-up window.

Any suggestions? Thanks.

import React, { Component } from 'react';
import { Form, Row, Col, Button, Container } from 'react-bootstrap';

import Aux, axios. Modal, ContactSummary from '../...';

import classes from './Contact.css';

class Contact extends Component {
    state = {
        initialSubmit: false,
        contact: {
            firstName: 'Tom',
            lastName: 'Smith'
        }
    }

    openContactSummaryHandler = () => {
        this.setState({initialSubmit: true});
    }

    submitCustomerInfoHandler = (event) => {
        const data = {
            firstName: this.state.contact.firstName,
            lastName: this.state.contact.lastName
        };

        axios.post('https://openseatdirect.firebaseio.com/customers/.json', data);

        this.setState({initialSubmit: false});

    }

    editCustomerInfoHandler = () => {
        this.setState({initialSubmit: false});
    }

    shouldComponentUpdate (props, state) {
        return this.state.contact === this.nextState.contact
    }

    render () {
        return (
            <Aux>
                <Modal show={this.state.initialSubmit}>
                    <ContactSummary contactInfo={this.state.contact}
                        submit={this.submitCustomerInfoHandler}
                        edit={this.editCustomerInfoHandler}></ContactSummary>
                </Modal>

                <div className={classes.MessageContainer}>
                    <Form className={classes.ContactForm}>
                        <Form.Row>
                            <Form.Label> First Name </Form.Label>
                            <Form.Control type="text" value={this.state.contact.firstName} onChange={(event) => this.setState({contact: {...this.state.contact, firstName: event.target.value}})}/>
                        </Form.Row>

                        <Form.Row>
                            <Form.Label> Last Name </Form.Label>
                            <Form.Control type="text" value={this.state.contact.lastName} onChange={(event) => this.setState({contact: {...this.state.contact, lastName: event.target.value}})}/>
                        </Form.Row>

                </div>

                <div className={classes.Button}>
                    <button onClick={this.openContactSummaryHandler}>
                        Submit Information
                    </button>
                </div>

            </Aux>
        )
    }
}
export default Contact;