How can I trigger a panel to open outside of the const?

Question

I understand that the line where the const isOpen is a hook, but I need to change the value of openPanel to true to open the panel. I'm new to react and fluentUI. It's probably something really obvious that I just don't realize at this stage.

export const FactionsMap = () =>{

const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
return(
    <ThemeProvider  applyTo='body' theme={myTheme}>
        <TopBar/>
        <Separator/>
        <Stack horizontalAlign="center" styles={contentStackStyle}>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
            <Row/>
        </Stack>
        <Panel headerText="Selected Tile" isBlocking={false}  onDismiss={dismissPanel} closeButtonAriaLabel="Close">
            <p id="panelContent"></p>
        </Panel>
    </ThemeProvider>
    
  );
};

const onSquareClick = (event:any) => {
console.log(event.target.innerHTML);
const panelContent = document.getElementById("panelContent");
if(panelContent !== null)
{
    panelContent.innerHTML = event.target.innerHTML;
}

}

Answer 1

I figured it out. Turns out I just needed to pass the openPanel function through the rows to the squares as a prop, and now it works!

Answer 2

openPanel is a function, so just call it: openPanel(). Similarly, you can do closePanel() to close the panel programatically.

To understand useBooelan() better, I suggest googling "react useBoolean". There are several good blog articles that explain how to use it.