Closed becauseinterwebs closed 4 years ago
Actually, I have the same problem with Material UI, i don't understand why.
@jasonleibowitz I can't get a model(from materialUI) to be rendered, can you make a codepen
or something explaining it? Thanks.
Here is a Code Sandbox example for using this with material-ui. I think both of your issues are related.
You can't just pass in the Modal directly imported from the library into this HOC because, for instance, the Material UI Modal expects content inside of it and that doesn't happen automatically. Instead, you should create a wrapper around the Material UI Modal that passes children, the add to calendar content, into it:
// components/ModalWrapper.js
import { Modal } from '@materia-ui/core';
export default function ModalWrapper({ children, isOpen, handleCloseModal }) {
return (
<Modal open={isOpen} onClose={handleCloseModal}>
{children}
</Modal>
);
}
That should solve your problem.
Well, i am doing this:
const AddLink = () => {
return (
<Link
// onClick={handleOnClick}
style={{ cursor: "pointer", textDecoration: "none" }}
>
<PlusIcon style={{ marginRight: 20 }} />
<Typography component="span" className={clsx(classes.typho, classes.pink)}>
{t("event.add.calendar.link")}
</Typography>
</Link>
)
}
const AddToCalendarDropdown = AddToCalendarHOC(AddLink, Dropdown)
But... i'mt not sure, it seems clicking in the link does not change its state. Why?
If you look at the examples in the docs your Button
component needs to accept both onClick
and children
props:
const AddLink = ({ children, onClick }) => {
return (
<Link
onClick={onClick}
>
<PlusIcon />
<Typography component="span">{t("event.add.calendar.link")}</Typography>
</Link>
);
};
That should work. If it doesn't, why don't you create a code sandbox to debug?
Closed as non-actionable.
Not really a bug, and not really a feature request .. ;)
I can't get the modal or dropdown working with Semantic UI React components:
The modal does not open on button click, and using dropdown created a React.children error:
React.Children.only expected to receive a single React element child.
So just wondering how to implement this with Semanti UI React components?
Thank you!