CODEWITHSUNDEEP
javascriptreactjsonclickdialog
ash1102
ash1102

Reputation: 457

child component dialog box not closing

I have a button in my parent component using which I am closing the dialog box in my child component.

Parent Component

handleMsgOpen = () => {
    console.log('open called')
    this.setState({ showMsg: true });
  }
handleMsgClose = () => {
    console.log('close called');
    this.setState({ showMsg: false });
    // this.props.authContext.logOut();
  }

render{
return(
...some code
{this.state.showNotificationBell === true ?
              < div className={styles.bell} onClick={this.handleMsgOpen}>
                <img className={styles.bellIcon} src={'./DrawerAssets/bell.svg'} alt='bell' />
                <div className={styles.bellNumber}>1</div>
                <Msg
                  showMsg={this.state.showMsg}
                  handleMsgOpen={this.handleMsgOpen}
                  handleMsgClose={this.handleMsgClose}
                />
              </div> : null}
...some code
)
}

Msg Component(Child component)

import React from 'react';

import {
    Grid, Typography, Container, Box, CircularProgress,
    Dialog, DialogActions, DialogContent, Button, DialogTitle,

} from '@material-ui/core';


export interface MsgProps {
    showMsg: boolean;
    handleMsgOpen: any;
    handleMsgClose: any;
}

export interface MsgState {
}

class Msg extends React.Component<MsgProps, MsgState> {

    handleMsgOpen = () => {
        this.props.handleMsgOpen();
    }

    handleMsgClose = () => {
        this.props.handleMsgClose();
    }

    render() {
        console.log('boolean', this.props.showMsg);
        return (
            <div>
                <Dialog open={this.props.showMsg} onClose={this.handleMsgClose}>
                    <DialogTitle className="MsgTitle">Message title </DialogTitle>
                    <DialogContent className="MsgContent">Message Content</DialogContent>
                    <DialogActions>
                        <Grid container justify="center" spacing={2} style={{ paddingBottom: "2%" }}>
                            <Grid item>
                                <Button onClick={this.handleMsgClose} className="MsgButton" variant="outlined">
                                    <div className="MsgLabel">
                                        Logout
                                    </div>
                                </Button>
                            </Grid>
                        </Grid>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

export default Msg;

first time when you click on the bell icon dialog box opens correctly.but when i close it show Msg changes to false and that is good but then again handleMsgOpen is called in the parent component and show Msg changes back to true which doesn't let the box to close.

could onclick be fired when parent component is re-rendered but then why is it not happening the first time parent loads?

Upvotes: 0

Views: 693

Answers (1)

Prateek Thapa
Prateek Thapa

Reputation: 4938

Don't put your icon and Message in the same div.

The problem here is whenever you're clicking the Message to close it, your click handler is bubbled to the parent in the icon since it is enclosed by the div that another click handler. Basically, your child component click handlers is registered and then the click handler is bubbled up to the parent and is registered again.

This is called event bubbling. You could read about this here

<div 
  className={styles.bell} 
  onClick={this.handleMsgOpen}
>
  <img 
    className={styles.bellIcon} 
    src={'./DrawerAssets/bell.svg'}
     alt='bell' 
    />
    <div className={styles.bellNumber}>1</div>
</div> <--- Seperate the div here.

<Msg
  showMsg={this.state.showMsg}
  handleMsgOpen={this.handleMsgOpen}
  handleMsgClose={this.handleMsgClose}
/>

Upvotes: 1

Related Questions