I would like to create a simple notification with a dismiss button in a static React site. Say I have my component set up like this:
// layout.js
import * as React from 'react'
const Layout = ({showNotification = true}) =>
<div>
<header>HEADER</header>
{showNotification ?
<div style={{display: showNotification ? "flex" : "none"}}>
NOTIFICATION
<span onClick={() => {showNotification = false}}>
DISMISS
</span>
</div>
: null}
<main>MAIN CONTENT</main>
<footer>FOOTER</footer>
</div>
export default Layout
I expect since the display property is set based on the value of showNotification and since the onClick updates the value of showNotification that clicking on the "Dismiss" span would hide the entire notification.
However, as far as I can tell the onClick handler is called, and it does update the value of showNotifications, but that doesn't get reflected in the render.
How can I set this up so that I can get the onClick to update the state for the component in a way that would be reflected by the rest of the component?
showNotification is a props. You cannot change it directly. In addition to showNotification, you must pass a function that changes the state in the component where the state is set. Here's an example:
import React, {useState} from 'react'
const App = () => {
const [showNotification, setShowNotification] = useState(true)
const toggleShow = () => setShowNotification(!showNotification)
return (
<div>
Some content
<Layout
showNotification={showNotification}
toggleShow={toggleShow}
/>
</div>
)
}
export const Layout = ({showNotification, toggleShow}) =>
<div>
<header>HEADER</header>
{showNotification ?
<div style={{display: showNotification ? "flex" : "none"}}>
NOTIFICATION
<span onClick={toggleShow}>
DISMISS
</span>
</div>
: null}
<main>MAIN CONTENT</main>
<footer>FOOTER</footer>
</div>
export default App