CODEWITHSUNDEEP
javascriptreactjs
Ashish Singh
Ashish Singh

Reputation: 193

Unwanted content is showing while closing modal

I have created a modal, which uploads a file, then shows the success message or error after upload. Like this:

const { showUploadModal } = this.state;          // state for modal
const { uploadMessage } = this.props;            // uploadMessage from reducer
<CustomModal                                     // Reusing this component which creates a modal
    show={uploadMessage || showUploadModal}      // show modal if true
    headerTitle="Upload file"
    message={uploadMessage ? uploadMessage : 'Choose file'}   // show uploadMessage if present
    cancelHandler={this.toggleUploadModal}
>
    {!uploadMessage && uploadModalContent}  // children for the modal (uploadModalContent contains the jsx content which helps in the upload of a file)
</CustomModal>

This is my toggleUploadModal:

toggleUploadModal = () => {
    const { clearUploadError, uploadMessage } = this.props;
    if (uploadMessage) {
        return clearUploadMessage();        // clearUploadMessage action, (clears from reducer)
    }
    this.setState({ showUploadModal: !showUploadModal });
}

The problem is when my modal shows message, and I click close button, I can see the uploadModalContent for a few milliseconds. This is making the UX a bit sluggish.

I have tried many things, like using callback after setState to clearUploadMessage, but still the problem persists. I am unable to find the cause of the problem, if anyone know, please tell me, as this is very important.

P.S.: If you have any question about the code, please comment and I will reply it as soon as possible.

Upvotes: 0

Views: 32

Answers (2)

mxsxs2
mxsxs2

Reputation: 949

You could remove the whole component if the showUploadModal is false like this:

{showUploadModal && <CustomModal    // Reusing this component which creates a modal
       show={uploadMessage || showUploadModal}      // show modal if true
       headerTitle="Upload file"
       message={uploadMessage ? uploadMessage : 'Choose file'}   // show uploadMessage if present
       cancelHandler={this.toggleUploadModal}
       >
            {!uploadMessage && uploadModalContent}  // children for the modal (uploadModalContent contains the jsx content which helps in the upload of a file)
       </CustomModal>
}

It may be faster to hide this way. There always gonna be a few millisecond delay as the parent has to re-render the child components upon the state state.

Upvotes: 1

rrebase
rrebase

Reputation: 4219

It probably happens, because you call clearUploadMessage, which has just enough time to create a new render where !uploadMessage will be true and {!uploadMessage && uploadModalContent} will flash your modal content.

You could

  1. Clear your upload message after closing the modal by using the callback of setState this.setState({ showUploadModal: !showUploadModal }, clearUploadMessage);

  2. Use the existance of upload message as the condition for modal being open (works only if you have a message present all the time) show={Boolean(uploadMessage)}

Upvotes: 0

Related Questions