A confirmation dialog on React

confirmation-dialog.js

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'

const ConfirmationModal = props => {
    return (
        <Modal isOpen={true} toggle={props.onNo} backdrop={true}>
            <ModalHeader toggle={props.onNo}>{props.title}</ModalHeader>
            <ModalBody>{props.content}</ModalBody>
            <ModalFooter>
                <Button color="primary" onClick={props.onYes}>
                    Yes
                </Button>{' '}
                <Button color="secondary" onClick={props.onNo}>
                    No
                </Button>
            </ModalFooter>
        </Modal>
    )
}

ConfirmationModal.propTypes = {
    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    title: PropTypes.string.isRequired,

    onYes: PropTypes.func.isRequired,
    onNo: PropTypes.func.isRequired,
}

export default function confirmation(title, content) {
    return new Promise((resolve, reject) => {
        const wrapper = document.body.appendChild(document.createElement('div'))

        const close = () => {
            ReactDOM.unmountComponentAtNode(wrapper)
            return setTimeout(() => {
                return wrapper.remove()
            })
        }

        const onYes = event => {
            event.stopPropagation()
            resolve()
            close()
        }

        const onNo = event => {
            event.stopPropagation()
            reject()
            close()
        }

        ReactDOM.render(
            <ConfirmationModal title={title} content={content} onYes={onYes} onNo={onNo} />,
            wrapper
        )
    })
}