CODEWITHSUNDEEP
javascriptreactjsreact-modal
Berg_Durden
Berg_Durden

Reputation: 1781

I am getting this error: “react-modal: App element is not defined”

I am using React-modal in an application I am building. It works fine, but I am getting this error:

enter image description here

As I found out on this thread https://github.com/reactjs/react-modal/issues/133 it seems to be happening becase "react-modal was trying to set the app element to document.body, while it doesn't exist yet"

I found a couple solutions on this question, but none of them solved my problem: "Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`"

What I had to do was to set ariaHideApp={false} , it works, but it's not a solution.

Any idea how I could solve this?

It's worth remembering that componentWillMount are deprecated, besides that I am working with hooks.

This is the library and a sample of the code. My modal is quite similar to it, the only difference is the content: https://www.npmjs.com/package/react-modal

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
 
const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};
 
// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')
 
function App(){
  var subtitle;
  const [modalIsOpen,setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }
 
  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }
 
  function closeModal(){
    setIsOpen(false);
  }


return (
  <div>
    <button onClick={openModal}>Open Modal</button>
    <Modal
      isOpen={modalIsOpen}
      onAfterOpen={afterOpenModal}
      onRequestClose={closeModal}
      style={customStyles}
      contentLabel="Example Modal"
    >

      <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
      <button onClick={closeModal}>close</button>
      <div>I am a modal</div>
      <form>
        <input />
        <button>tab navigation</button>
        <button>stays</button>
        <button>inside</button>
        <button>the modal</button>
      </form>
    </Modal>
  </div>
);
}



ReactDOM.render(<App />, appElement);

Upvotes: 2

Views: 4717

Answers (2)

Walisson Rodrigues
Walisson Rodrigues

Reputation: 7

You have not set your app element properly.

Change the following line:

Modal.setAppElement('#yourAppElement');

To:

Modal.setAppElement('#root');

Or to your actual app element.

For more information check this documentation: http://reactcommunity.org/react-modal/accessibility/

Upvotes: 0

Balram Chauhan
Balram Chauhan

Reputation: 191

add ariaHideApp={false} to your Modal properties like this:

         <Modal
            isOpen={modalIsOpen}
            onAfterOpen={afterOpenModal}
            onRequestClose={closeModal}
            style={customStyles}
            contentLabel="Example Modal"
            ariaHideApp={false}>
            <h1>My Modal</h1>
        </Modal>

Upvotes: 1

Related Questions