Больше не показывать компонент после нажатия на кнопку React / даже после обновления
Как сделать в Реакт так, чтобы при нажатии на кнопку в компоненте Notification - он больше не показывался даже при обновлении страницы?
{!notificationHidden &&
(
<Notification
onClose={handleCalculationNotificationClose}
>
<Button onClick={handleCalculationNotificationClose}>
ОК!
</Button>
</Notification>
)
}
.
const [notificationHidden, setNotificationHidden] = useState(false);
const handleCalculationNotificationClose = () => {
setNotificationHidden(true);
};
Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
Для того, что бы приложение проверяло значение при запуске, можно использовать localStorage.
В вашем примере, желаемого поведения можно достичь, изменив код следующим образом
const [notificationHidden, setNotificationHidden] = useState(!!localStorage.getItem('notification'));
const handleCalculationNotificationClose = () => {
setNotificationHidden(true);
localStorage.setItem('notification', '1');
};
При создании компонента, будет проверяться значение в хранилище и преобразовываться к типу boolean. Если что то есть, будет true, ничего нет, будет false.
При срабатывании функции handleCalculationNotificationClose в localStorage будет записано значение, которое при преобразовании к bololean вернет true, что предотвратит рендер компонента Notification.