Mastering the art of utilizing Modal components in Fluent UI

Question

Mastering the art of utilizing Modal components in Fluent UI

I recently started using React and Fluent UI, and I encountered an issue when trying to open a modal. I have loaded all my files from CDNs but the modal doesn't seem to open when executing the code below. I've tried looking for examples, but haven't found a solution yet. Below is the code snippet:

  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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f2d3a3e3c2b723b30321f6e69716e6b716f">[email protected]</a>/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>

Any assistance would be greatly appreciated.

javascript html css reactjs fluent-ui

Answer 1

Answer №1

When using the isModalOpen = true/false in React, it's important to note that React won't automatically re-render the view. To handle state management, React provides the useState hook. By calling the setter function, you can update the value and trigger a re-render of the component.

Hooks can only be called inside components and custom hooks. Therefore, we need to convert the app function into a proper component by renaming it to start with a capital letter.

According to Components and Props:

Note: Component names should always begin with a capital letter.

React interprets lowercase component names as DOM tags. For instance, <div /> represents an HTML div element, while <Welcome /> represents a component and requires Welcome to be within scope.

To understand more about this naming convention, refer to JSX In Depth.

After updating our function to a component, we also need to adjust how we call App. Instead of passing app() to ReactDOM.render(), now we 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f5d4a4e4c5b024b40426f1e19011e1b011f">[email protected]</a>/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>

Answer 2

When using the isModalOpen = true/false in React, it's important to note that React won't automatically re-render the view. To handle state management, React provides the useState hook. By calling the setter function, you can update the value and trigger a re-render of the component.

Hooks can only be called inside components and custom hooks. Therefore, we need to convert the app function into a proper component by renaming it to start with a capital letter.

According to Components and Props:

Note: Component names should always begin with a capital letter.

React interprets lowercase component names as DOM tags. For instance, <div /> represents an HTML div element, while <Welcome /> represents a component and requires Welcome to be within scope.

To understand more about this naming convention, refer to JSX In Depth.

After updating our function to a component, we also need to adjust how we call App. Instead of passing app() to ReactDOM.render(), now we 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f5d4a4e4c5b024b40426f1e19011e1b011f">[email protected]</a>/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>

Mastering the art of utilizing Modal components in Fluent UI

Answer №1

Similar questions

Setting up the Gumby Framework: A Step-by-Step

Discover choices based on the values in an array

Tips for retaining a number even when the page is refreshed

Place the outcome of the function into the div element's attribute

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

"Upload a video file and use JavaScript to extract and save the first frame as an image

Using Vuex: Bypassing Action and triggering Mutation directly within Component

Assistance needed in retrieving an element using jQuery

Having trouble understanding why getStaticProps function is not loading before the main exported function

Exploring Angular 9: Harnessing the Power of Fork Join with an Array of

Error: This action is not supported by the object in Internet Explorer 11

Trouble with AJAX request when trying to connect to a distant server

Creating arrow indicators in navigation menus using CSS and JavaScript can be seen on websites like playframework.org

What significance does this change in font size hold?

Using JavaScript to dynamically write content to the document in the

Are multiple instances of ajax being executed within the modal?

The issue of page content failing to refresh when loaded using AJAX technology

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

Align a text box and button in the center with precision using Bootstrap 5

Include the preset value within the textarea input box