How to properly use Modal in Fluent UI

Question

I am new to React and Fluent UI, I loaded all my files from CDNs, when I tried execute the following code, the modal didn't open. Please tell me what I am doing wrong here. I searched up examples but wasn't able to find one. Here is the code:

  const { DefaultButton,Fabric,Modal,IconButton} = window.FluentUIReact;
    const app = () =>{
      var isModalOpen = false;
      function showModal(){
        isModalOpen = true;
      }
      function hideModal(){
        isModalOpen = false;
      }
      return (
        <Fabric applyThemeToBody>
        <DefaultButton onClick={showModal}>Make a Poll</DefaultButton>
        <Modal
            titleAriaId={"id"}
            isOpen={isModalOpen}
            onDismiss={hideModal}
            isBlocking={true}
          >
            <div>
              <span id={"id"}>Lorem Ipsum</span>
              <IconButton
                iconProps = {{iconName: 'Cancel'}}
                ariaLabel="Close popup modal"
                onClick={hideModal}
              />
            </div>
            <div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
                amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
              </p>
            </div>
          </Modal>
        </Fabric>
      );
    };

    ReactDOM.render(app(), document.getElementById('app'))

<div id="app"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@fluentui/react@7/dist/fluentui-react.js"></script>
  <script src="https://unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script defer type="text/babel" src="script.jsx"></script>

Thanks in advance

Is there are any errors in console? – CHanaka Apr 10 '21 at 18:50 — CHanaka, Apr 10 '21 at 18:50
There weren't any errors – Abaan Shanid Apr 11 '21 at 04:42 — Abaan Shanid, Apr 11 '21 at 04:42

score 2 · Accepted Answer · answered Oct 05 '21 at 09:19

If you use isModalOpen = true/false React will never know that it is supposed to re-render the view. React offers the useState hook to store state. You can then call the setter to update the value and notify React that it has to re-render the component.

You may only call hooks inside components and custom hooks. So we have to convert the function app into a component. This is simply done by changing the name of the function to start with a capital letter.

From Components and Props:

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth.

After making this change we also need to update the way we call App. Instead of passing app() to ReactDOM.render() we now pass <App />.

const { useState } = React;
const { DefaultButton, Fabric, Modal, IconButton } = FluentUIReact;

const App = () =>{
  const [isModalOpen, setIsModalOpen] = useState(false);
    
  function showModal() {
    setIsModalOpen(true);
  }
  function hideModal() {
    setIsModalOpen(false);
  }
  return (
    <Fabric applyThemeToBody>
      <DefaultButton onClick={showModal}>Make a Poll</DefaultButton>
      <Modal
        titleAriaId="id"
        isOpen={isModalOpen}
        onDismiss={hideModal}
        isBlocking={true}
      >
        <div>
          <span id="id">Lorem Ipsum</span>
          <IconButton
            iconProps = {{iconName: 'Cancel'}}
            ariaLabel="Close popup modal"
            onClick={hideModal}
          />
        </div>
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
            amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor
          </p>
        </div>
      </Modal>
    </Fabric>
  );
};

ReactDOM.render(<App />, document.getElementById('app'))

<div id="app"></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@fluentui/react@7/dist/fluentui-react.js"></script>
<script src="https://unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>

How to properly use Modal in Fluent UI

1 Answers1