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;
}

}

On a side note, setting `innerHTML` goes against the React way. Instead, you should set state that can be used when rendering the component. — Code-Apprentice, Mar 14 '22 at 06:19

score 0 · Answer 1 · answered Mar 12 '22 at 00:49

0

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.

answered Mar 12 '22 at 00:49

Code-Apprentice

81,660
23
145
268

I tried that, it still didn't like that. I'm trying to call it in the `onSquareClick` function. I think its angry about the fact that the function is declared inside of `FactionsMap` – Titan Gaming Mar 12 '22 at 02:19
@TitanGaming Please show wha tyou tired. Also, code can't be "angry". It's code, not a person. – Code-Apprentice Mar 14 '22 at 06:18

score 0 · Accepted Answer · answered Mar 12 '22 at 14:20

0

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!

answered Mar 12 '22 at 14:20

Titan Gaming

3
3

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

2 Answers2