React JS, calling function and closing a dialog on click

Question

I am totally new to React. I had to edit someone's code to add new fuctionality.

On click of link, Code shows a confirmation dialog using modal. When user clicks Yes it should clear text in an area(by calling a function) and then close the dialog, when clicking on cancel dialog should simply close.

I modified the code so that, the cancel button is working fine. But when I am clicking on yes, It is calling the function and clearing the text but not closing the dialog. My code below.

    function ConfirmModal({resetNewQuery, visible, onClose }) {
    
 
  return (
    <>
      <Modal
        width={500}
        title="Confirmation"
        visible={visible}
        onClose={onClose}
      >
        <div><b>Are you sure you want to clear query? All the contents will be deleted!</b></div>
        <div/>
        <div/>
      <Button size="btnsm" variant="primary" onClick={()=>resetNewQuery(),{onClose}}>Yes</Button>
        <Button size="btnsm" variant="primary" onClick={onClose}>Cancel</Button>
      </Modal>
    </>
  );
}

Code for the modal

    function Modal({ title, visible, onClose, width, children }) {
  if (visible) {
    return (
      <Dialog
        aria-label={title}
        onDismiss={onClose}
        className={styles.Dialog}
        style={{
          width,
        }}
      >
        <div className={styles.titleWrapper}>
          <span>{title}</span>
          {onClose && (
        
            <div class="iconwrapper" onClick={onClose}>
              <CloseIcon />
            </div>
          )}
        </div>
        <div className={styles.dialogBody}>{children}</div>
      </Dialog>
    );
  }
  return null;
}

How can achieve to clear the query and close the dialog on clicking yes.

aleEspinosaM · Accepted Answer · 2020-08-13 16:40:52Z

2

hi there @Sudiv the problem is here

<Button size="btnsm" variant="primary" onClick={()=>resetNewQuery(),{onClose}}>Yes</Button>

when you pass a callback to onClick you need to open curly braces if you want to call multiple functions

onClick={() => {
 resetQuery();
 onClose();
}}

or you could have a handler on your component something like

onClick={() => onClickHanlder()}

onClickHandler = () => {
 resetQuery();
 onClose();
}

answered Aug 13, 2020 at 16:40

aleEspinosaM

4442 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sudiv Over a year ago

Thanks @aleEspinosaM. This solved my problem :) . One question though, Before coming to stack exchange I tried your exact solution but without () on the onClose. like onClick={() => { resetQuery(); {onClose} }} and onClick={() => { resetQuery(); onClose = {onClose} }} But that throwed error. I thought onClose is variable. What is exaclty happening here? How adding () to onClose solved the issue. Just curious.

aleEspinosaM Over a year ago

because onclose is a function, not a variable, so you will need to call the function,

Collectives™ on Stack Overflow

React JS, calling function and closing a dialog on click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related