I want to invoke something like a function call inside of a response so that I can open up a modal. I'm using material ui for the modal.

Modal

The flow goes with something like

1. Click on a button
2. Send request
3. Get response and display message in Modal.

The modal exists as a separate ponent so i cannot do

.then( e => {
        <Modal />
       })

Tried including the modal hook in the same file but doesn't work like that.

axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          <WarningModal />
        } else if (res.data.type === "email sent") {
          <SuccessModal />
        }
      });

Just want to invoke modal ponents on receiving response.

I want to invoke something like a function call inside of a response so that I can open up a modal. I'm using material ui for the modal.

Modal

The flow goes with something like

1. Click on a button
2. Send request
3. Get response and display message in Modal.

The modal exists as a separate ponent so i cannot do

.then( e => {
        <Modal />
       })

Tried including the modal hook in the same file but doesn't work like that.

axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          <WarningModal />
        } else if (res.data.type === "email sent") {
          <SuccessModal />
        }
      });

Just want to invoke modal ponents on receiving response.

• javascript
• reactjs
• material-ui

• You are making this request inside your react ponent ? – ibtsam Commented Nov 7, 2019 at 9:56
• Define model inside render function based on boolean value which will be handled in response of api call. – akhtarvahid Commented Nov 7, 2019 at 9:56
• It's not clear where your axios request code is placed in your ponent. In any case, put it inside a function outside of your render. Call the function onClick. Then, instead of putting <WarningModal /> etc inside your axios, change a state variable (for example this.state.showWarningModal which is true or false. Same for SuccessModal. Then in your render, render the modal when the corresponding state variable is true – Chris Commented Nov 7, 2019 at 9:57

3 Answers 3

As you may have noticed, the Modal ponent from material-ui takes an open prop indicating whether the modal is open or not.

So what you have to do is to put the modal somewhere in your JSX with the open prop set to a boolean value ing from your ponent's state. And when you receive the response from your HTTP call, you toggle this boolean to true, and the modal will appear.

Add 2 state variable for both modals and set them true in the axios call, also add the modal to the return.

const test = () => {
    const [showSuccessModal, setShowSuccessModal] = useState(false)
    const [showWarningModal, setShowWarningModal] = useState(false)


    axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          setShowWarningModal(true)
        } else if (res.data.type === "email sent") {
            setShowSuccessModal(true)
        }
      });

    return (
        <div>
            <WarningModal open={showWarningModal}/>
            <SuccessModal open={showSuccessModal} />
        </div>
    )

}

What you want to do is this:

1. Add your Modal ponent to your ponent's render function. Like so:
2. Hook the open prop of the Modal ponent to a state, call it openModal. Now you have this.state.openModal.
3. On request response, do a this.setState({openModal: true})
4. The modal should now be opening.

You should have something like this:

render() => {
       return (
          ...
          <Modal open={this.state.openModal}/>
       )
    }