Fixed two error logs

no nesting buttons inside buttons
mismatch between server and client redendered html
This commit is contained in:
t1enne
2022-05-24 22:26:04 +02:00
parent a947e67968
commit fd131a25af

View File

@@ -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>
)
); );
} }