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.
Share Improve this question edited Nov 30, 2019 at 17:45 ipenguin67 asked Nov 30, 2019 at 5:07 ipenguin67ipenguin67 1,6596 gold badges24 silver badges45 bronze badges 5-
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
Reset to default 4Your 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"
>