state
and actions
within our theme to develop a bit of interactivity.state.router.link
when we first connected our <Root>
component to the state in an earlier lesson.index.js
at the root of our theme and add a new boolean property called isUrlVisible
in state.theme
. We'll set its default value to false
.<HeaderContent>
component within the <Root>
component we'll add some conditional logic to check the value of isUrlVisible
and either display the URL or not. Again we have to use the ternary conditional operator here.isUrlVisible
in index.js
to true
it will reappear. Try it now! (note: you may have to manually refresh the browser)isUrlVisible
variable determines whether the URL is visible or not.toggleUrl
, that will toggle the value of isUrlVisible
between true and false.toggleUrl
action we just added to change the value of isUrlVisible
from the front end.button
element and "Current URL" string in enclosing empty tags <> ... </>
.actions
to the <Root>
component in order to use the toggleUrl
function that we defined earlier.<Button>
component and use it in place of the <button>
element in order to improve the appearance.