This guide is about to get an asynchronous result from react modal. Sometimes, we want to wait until user select a choice showing a modal, then proceed the following codes based on the user's choice. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnmapxkd6eo38tr3s0a8.png) ## Create the modal component Modal.js ``` import React from 'react' import './modal.css' export default function Modal({isShow, onClose, message}) { return isShow &&

{message}

} ``` Here I created a simple message modal component. This modal returns a 'true/false' when a user clicks on OK or Cancel buttons. ## Create the Modal Context Provider context.js ``` import {createContext} from 'react'; export const ModalContext = createContext({ show: () => {} }) ``` ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41o73bjorlgct0qidf4d.png) ModalProvider.js ``` import React, {useState, useRef, useCallback, createContext, useEffect} from 'react' import Modal from './Modal' import {ModalContext} from './context' export default function ModalProvider({children}) { const [isShow, setIsShow] = useState(false); const [message, setMessage] = useState(""); const promiseRef = useRef(); const show = useCallback((message) => { setIsShow(true); setMessage(message); return new Promise((resolve, reject) => { promiseRef.current = {resolve, reject}; }) }, []) return {children} { setIsShow(false); if (promiseRef.current) { promiseRef.current.resolve(response) } promiseRef.current = null }} message={message} /> } ``` app.js ``` import {useContext} from "react" import './App.css' import {ModalContext} from './modal/context' export default function App() { const modal = useContext(ModalContext); const onShowButtonClick = async () => { const result = await modal.show("Hello World!"); alert('result'); } return (

React Asyncronous Confirm Modal

Click the button to show a async confirm modal

) } ``` ## Final Thoughts This is a simple and useful way I've found to get the user's choice when I have to proceed the following codes related to the user's decision. [Live Code](https://replit.com/@polarisiota/AsyncModal)

polarisiota

A Guide to Asynchronous result of React modal

Join Our Newsletter. No Spam, Only the good stuff.