I'm building a story in storybook, but that isn't too relevant to the question at hand. Basically, I need to build a situation where I have an anchor tag that, when clicked, opens a dialog box/modal window. The dialog is a component, <Dialog />. I'm mocking it up as something that looks like:
<a onclick={launches Dialog component}>Click Me</a>
This seems like a simple question and I just don't know the answer. I appreciate the help!
You'd have a few ways to achieve your needs.
useState and conditional renderingconst [open, setOpen] = useState(false)
<a onClick={() => setOpen(true)}>Click Me</a>
{open && <MyComponent />}
useState and cssconst [open, setOpen] = useState(false)
<a onClick={() => setOpen(true)}>Click Me</a>
{/* You could use visibility instead of display */}
<MyComponent style={{display: open ? 'block' : 'none'}} />