I am using the Material UI Modal ponent in my React app, and it will take up the majority of the screen (about 95%). As a result, I would like to give users a more intuitive way of closing the modal by adding a small "X" icon in the upper right of the modal and allowing that to close it. I am passing the same handleClose function down to this icon as I am to the Modal itself, but the function isn't even getting called when I click the icon. I checked all the props and the function is getting passed down correctly, it just isn't getting evaluated on the CloseIcon ponent's onClick.

Page.js

const Page = props => {

  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    console.log('testing')
    setOpen(false);
  };

  return (
    <>
      <Button type="button" onClick={handleOpen} buttonText="Add Meal" />

      <ModalContainer
        open={open}
        handleClose={handleClose}
      >
      </ModalContainer>
    </>
  )
};

ModalContainer.js

const ModalContainer = ({
  open,
  handleClose,
  ...props
}) => {

  return (
    <div>
      <Modal
        open={open}
        onClose={handleClose}
      >
        <StyledDialogContent>
          <ModalContent handleClose={handleClose} />
        </StyledDialogContent>

      </Modal>
    </div>
  )
};

ModalContent.js

class ModalContent extends React.Component {

  render() {
    const { handleClose } = this.props;
    return (

      <Container justify="center" alignItems="center">
        <ModalBody flexDirection="column" >
          <TopBar justify="flex-end" alignItems="center">
            <CloseIcon onClick={handleClose} />
          </TopBar>
          <BodyContainer>
            <FlexContainer>
              <RecipeCard />
            </FlexContainer>
            <FlexContainer>
              <MenuCard
                title="Custom Food"
                icon=".svg"
                link=""
              />
            </FlexContainer>
          </BodyContainer>

        </ModalBody>
      </Container>
    )
  }
};

CloseIcon.js

const CloseIcon = props => (
  <Circle justify="center" alignItems="center">
    <Icon
      viewBox="0 0 26 26"
      xmlns=""
      xmlnsXlink=""
    >
      <g id="Style-Guide" stroke="none" strokeWidth="1" fillRule="evenodd">
        <g
          id="Style-Guide---Elements"
          transform="translate(-198.000000, -5239.000000)"
          strokeWidth="1.5"
        >
          <g
            id="Remove-X-icon-Default"
            transform="translate(199.000000, 5240.000000)"
          >
            <g
              id="Group"
              transform="translate(12.000000, 12.000000) rotate(-315.000000) translate(-12.000000, -12.000000) translate(6.000000, 6.000000)"
              strokeLinecap="round"
            >
              <path d="M0,6 L12,6" id="Line-2"></path>
              <path d="M6,0 L6,12" id="Line-2-Copy"></path>
            </g>
          </g>
        </g>
      </g>
    </Icon>
  </Circle>
);

How can I make this CloseIcon ponent actually call the handleClose function and close the modal?

EDIT: I added the CloseIcon.js ponent here for reference. However, the onClick event is firing correctly -- I tested this by replacing the handleClose function with a simple console.log and it fired appropriately on click.

I am using the Material UI Modal ponent in my React app, and it will take up the majority of the screen (about 95%). As a result, I would like to give users a more intuitive way of closing the modal by adding a small "X" icon in the upper right of the modal and allowing that to close it. I am passing the same handleClose function down to this icon as I am to the Modal itself, but the function isn't even getting called when I click the icon. I checked all the props and the function is getting passed down correctly, it just isn't getting evaluated on the CloseIcon ponent's onClick.

Page.js

const Page = props => {

  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    console.log('testing')
    setOpen(false);
  };

  return (
    <>
      <Button type="button" onClick={handleOpen} buttonText="Add Meal" />

      <ModalContainer
        open={open}
        handleClose={handleClose}
      >
      </ModalContainer>
    </>
  )
};

ModalContainer.js

const ModalContainer = ({
  open,
  handleClose,
  ...props
}) => {

  return (
    <div>
      <Modal
        open={open}
        onClose={handleClose}
      >
        <StyledDialogContent>
          <ModalContent handleClose={handleClose} />
        </StyledDialogContent>

      </Modal>
    </div>
  )
};

ModalContent.js

class ModalContent extends React.Component {

  render() {
    const { handleClose } = this.props;
    return (

      <Container justify="center" alignItems="center">
        <ModalBody flexDirection="column" >
          <TopBar justify="flex-end" alignItems="center">
            <CloseIcon onClick={handleClose} />
          </TopBar>
          <BodyContainer>
            <FlexContainer>
              <RecipeCard />
            </FlexContainer>
            <FlexContainer>
              <MenuCard
                title="Custom Food"
                icon="https://nutriology-storage.s3.amazonaws./Custom-Food.svg"
                link=""
              />
            </FlexContainer>
          </BodyContainer>

        </ModalBody>
      </Container>
    )
  }
};

CloseIcon.js

const CloseIcon = props => (
  <Circle justify="center" alignItems="center">
    <Icon
      viewBox="0 0 26 26"
      xmlns="http://www.w3/2000/svg"
      xmlnsXlink="http://www.w3/1999/xlink"
    >
      <g id="Style-Guide" stroke="none" strokeWidth="1" fillRule="evenodd">
        <g
          id="Style-Guide---Elements"
          transform="translate(-198.000000, -5239.000000)"
          strokeWidth="1.5"
        >
          <g
            id="Remove-X-icon-Default"
            transform="translate(199.000000, 5240.000000)"
          >
            <g
              id="Group"
              transform="translate(12.000000, 12.000000) rotate(-315.000000) translate(-12.000000, -12.000000) translate(6.000000, 6.000000)"
              strokeLinecap="round"
            >
              <path d="M0,6 L12,6" id="Line-2"></path>
              <path d="M6,0 L6,12" id="Line-2-Copy"></path>
            </g>
          </g>
        </g>
      </g>
    </Icon>
  </Circle>
);

How can I make this CloseIcon ponent actually call the handleClose function and close the modal?

EDIT: I added the CloseIcon.js ponent here for reference. However, the onClick event is firing correctly -- I tested this by replacing the handleClose function with a simple console.log and it fired appropriately on click.

• javascript
• reactjs
• modal-dialog
• material-ui

• 1 Trying removing onClose={handleClose} from your <Modal> ponent – junwen-k Commented Nov 30, 2019 at 7:21
• please post your import for CloseIcon, that might be the issue – Ido Commented Nov 30, 2019 at 12:35
• @Ido I edited the post with the ponent, but I don't think it's related to that since I tested the onClick event with a generic console.log and that fired appropriately. – ipenguin67 Commented Nov 30, 2019 at 17:47
• @dev_junwen I tried this and it did not work, but I'm not sure it would be the ideal scenario anyway since I'd still like for users to be able to close the modal by clicking outside of it in addition to the close icon. – ipenguin67 Commented Nov 30, 2019 at 17:47
• I thought your close icon was from @material-ui/icons haha. Didn't know it was a custom icon. – junwen-k Commented Nov 30, 2019 at 18:50

1 Answer 1

Your CloseIcon ponent doesn't handle onClick event.
add onClick prop to Circle or Icon

  <Circle onClick={props.onClick} justify="center" alignItems="center">

or

 <Icon
      onClick={props.onClick}
      viewBox="0 0 26 26"
      xmlns="http://www.w3/2000/svg"
      xmlnsXlink="http://www.w3/1999/xlink"
    >