Set state variable to false after render

Question

I've got a modal (some sort of custom toast) which shows up on the following class called Details when the showModal variable is set to true.

class Details extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            code: null,
            publication: null,
            loading: false,
            circleloading: false,
            showModal: false
        };
        this.setReady = this.setReady.bind(this);
    }

    handleSendMessage(event, errors) {

        event.preventDefault();
        let currentComponent = this;

        let ownerEmail = this.state.publication.userEmail;
        let title = this.state.publication.title;
        let emailDTO = JsonService.getJSONParsed(event.target);
        emailDTO.ownerEmail = ownerEmail;
        emailDTO.title = title;

        if (Object.keys(errors).length === 0) {
            this.setState({
                loading: true,
                showModal: false,
            });

            UserService.sendMessage(emailDTO).then(function(response) {
                currentComponent.setState({
                    loading: false,
                    showModal: true, // This works fine, but it turns out the modal then gets shown after every render
                });

            });
        }
    }

    render() {

        return (
            <div>
                <ToastNotification
                    show={this.state.showModal}
                    title={t('details.messageTitle')}
                    information={t('details.messageDetail')}
                    type='Information'
                    checkModal={false}
                    specialCloseModal={false}
                />
                <ImageVisualizer
                                    publicationid={query.publicationid}
                                    maxImages={this.state.publication.images}
                                    isFavourite={this.state.publication.favourite}
                                    page='Details'
                                    imageClass='imageSize'
                                    containerClass='img-with-tag mySlides'
                                    nextClass='next-image-details pointer centerArrow'
                                    previousClass='prev-image-details pointer centerArrow'
                                    setReady={this.setReady}
                                    index={0}
                />
            </div>
        );
    }
}

export default withRouter(withTranslation()(Details));

The thing is showModal is set to true after UserService.sendMessage gets called, which is ok. The modal shows up.

But the problem is whenever a render is triggered by another function or something else the modal is shown again? How can I set showModal to false after showing up?

Does that help? https://stackoverflow.com/questions/31352261/how-to-keep-react-component-state-between-mount-unmount — Buszmen, Feb 10 '20 at 22:53
I think this is because at the call of the next method/function the state is still `true` for `showModal`. — Claeusdev, Feb 10 '20 at 22:53
@Claeusdev yes, but the thing is the next method is called by another component used inside that render (ImageVisualizer). I could try setting it false there but I'm not really allowed to change ImageVisualizer's code — Flama, Feb 10 '20 at 23:00
`handleSendMessage` is not called in your snippet, can you show the full code? — Roy Wang, Feb 10 '20 at 23:03
@Stackoverflowed, could you try setting the `showModal` state to false in a `componentWillUnmount` to that you can reset your state to false everytime a new render is called. — Claeusdev, Feb 10 '20 at 23:11

score 1 · Accepted Answer · answered Feb 10 '20 at 23:05

Try to setState showModal = false with a setTimeout as follow

if (Object.keys(errors).length === 0) {
  this.setState({
    loading: true,
    showModal: false,
  });

  UserService.sendMessage(emailDTO).then(function (response) {
    currentComponent.setState({
      loading: false,
      showModal: true, // This works fine, but it turns out the modal then gets shown after every render
    });
    setTimeout(() => {
      currentComponent.setState({
        showModal: true,
      });
    }, 200);
  });
}

Set state variable to false after render

1 Answers1