Fixed two error logs
no nesting buttons inside buttons mismatch between server and client redendered html
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import { Popover } from 'antd';
|
import { Popover } from 'antd';
|
||||||
import { CloseOutlined } from '@ant-design/icons';
|
import { CloseOutlined } from '@ant-design/icons';
|
||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import s from './NotifyReminderPopup.module.scss';
|
import s from './NotifyReminderPopup.module.scss';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -13,6 +13,11 @@ interface Props {
|
|||||||
export default function NotifyReminderPopup(props: Props) {
|
export default function NotifyReminderPopup(props: Props) {
|
||||||
const { children, visible, notificationClicked, notificationClosed } = props;
|
const { children, visible, notificationClicked, notificationClosed } = props;
|
||||||
const [visiblePopup, setVisiblePopup] = useState(visible);
|
const [visiblePopup, setVisiblePopup] = useState(visible);
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const title = <div className={s.title}>Stay updated!</div>;
|
const title = <div className={s.title}>Stay updated!</div>;
|
||||||
const popupStyle = {
|
const popupStyle = {
|
||||||
@@ -35,26 +40,30 @@ export default function NotifyReminderPopup(props: Props) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const content = (
|
const content = (
|
||||||
<button type="button" onClick={popupClicked} className={s.contentbutton}>
|
<div>
|
||||||
<button type="button" className={s.closebutton} onClick={popupClosed}>
|
<button type="button" className={s.closebutton} onClick={popupClosed}>
|
||||||
<CloseOutlined />
|
<CloseOutlined />
|
||||||
</button>
|
</button>
|
||||||
Click and never miss
|
<button type="button" onClick={popupClicked} className={s.contentbutton}>
|
||||||
<br />
|
Click and never miss
|
||||||
future streams!
|
<br />
|
||||||
</button>
|
future streams!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<Popover
|
mounted && (
|
||||||
placement="topLeft"
|
<Popover
|
||||||
defaultVisible={visiblePopup}
|
placement="topLeft"
|
||||||
visible={visiblePopup}
|
defaultVisible={visiblePopup}
|
||||||
destroyTooltipOnHide
|
visible={visiblePopup}
|
||||||
title={title}
|
destroyTooltipOnHide
|
||||||
content={content}
|
title={title}
|
||||||
overlayInnerStyle={popupStyle}
|
content={content}
|
||||||
>
|
overlayInnerStyle={popupStyle}
|
||||||
{children}
|
>
|
||||||
</Popover>
|
{children}
|
||||||
|
</Popover>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user