import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Container, Modal } from "reactstrap";

function App() {
  const [firstModalOpen, setFirstModalOpen] = useState(false);
  const [secondModalOpen, setSecondModalOpen] = useState(false);

  return (
    <div className="overflow-scroll bg-primary vh-100">
      <div className="h-100">
        <Button onClick={() => setFirstModalOpen(true)}>Open</Button>
        <Modal isOpen={firstModalOpen}>
          <Button
            onClick={() => {
              setFirstModalOpen(false);
              setSecondModalOpen(true);
            }}
          >
            open second modal
          </Button>
        </Modal>
        <Modal isOpen={secondModalOpen}>
          <Button onClick={() => setSecondModalOpen(false)}>Close</Button>
        </Modal>
      </div>
      <div>overflow content</div>
    </div>
  );
}

export default App;