App,js

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { ModalYesNo } from './components/ModalYesNo';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false,
      succesful: false //novo
    }
  }

  render() {
    const { showModal, succesful } = this.state; //succesful adicionado
    
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
        <button
            className="btn show-modal"
            onClick={() =>
              this.setState({
                showModal: !showModal
              })}
          >
            Show Yes/No Modal
          </button>

          <ModalYesNo
            open={showModal}
            succesful={succesful} //novo
            onClose={() =>
              this.setState({
                showModal: false,
                succesful: false //novo
              })}
            yes="Login"
            no="Cancel"
            title="Login"
            onSubmit={() => {
              alert('Submitted!');
              this.setState({
                succesful: true //novo
              })

               setTimeout(() => this.setState({ showModal: false, succesful: false}), 1000); //novo
            }}
            height="350px"
            yesClass="btn btn-primary my-login-btn"
            noClass="btn btn-link"
            >
              <div className="container">
                <form>
                  <div className="form-group row">
                    <label htmlFor="inputEmail3" className="col-sm-3 col-form-label">Email</label>
                    <div className="col-sm-9">
                      <input type="email" className="form-control" id="inputEmail3" placeholder="Email" />
                    </div>
                  </div>
                  <div className="form-group row">
                    <label htmlFor="inputPassword3" className="col-sm-3 col-form-label">Password</label>
                    <div className="col-sm-9">
                      <input type="password" className="form-control" id="inputPassword3" placeholder="Password" />
                    </div>
                  </div>
                </form>
              </div>
            </ModalYesNo>
        </div>
      </div>
    );
  }
}

export default App;