title: "Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`"
body: <p>How to fix this warning in console of a React app using the react-modal package:  </p>
  
  <blockquote>
    <p>Warning: react-modal: App element is not defined. Please use <code>Modal.setAppElement(el)</code> or set <code>appElement={el}</code>  </p>
  </blockquote>
  
  <p>I have not been successful at figuring out what <code>el</code> is supposed to be.  </p>
  
  <p>Context:
  in my App.js root component file:  </p>
  
  <pre><code>...
  import Modal from 'react-modal';
  ...
  class App extends Component {
    ...
    render(){
      ...  
      &lt;Modal
        className="modal"
        overlayClassName="overlay"
        isOpen={foodModalOpen}
        onRequestClose={this.closeFoodModal}
        contentLabel="Modal"
      &gt;
      ...
    }
  }
  </code></pre>
  
  <p>Where <code>...</code> indicates code not shown.  </p>
  
  <p>Everything works fine, but when the Modal is opened, the following Warning appears in my console:  </p>
  
  <blockquote>
    <p>index.js:2177 Warning: react-modal: App element is not defined. Please use <code>Modal.setAppElement(el)</code> or set <code>appElement={el}</code>. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting <code>ariaHideApp={false}</code>.  </p>
  </blockquote>
  
  <p>In the <a href="https://www.npmjs.com/package/react-modal#app-element" rel="noreferrer">react-modal docs</a> all I can find is the following:  </p>
  
  <blockquote>
    <p>App Element
    The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal.  </p>
    
    <p>If you are doing server-side rendering, you should use this property.  </p>
    
    <p>It can be specified in the following ways:  </p>
    
    <p>DOMElement<br>
    <code>Modal.setAppElement(appElement);</code><br>
    <code>query selector - uses the first element found if you pass in a class.</code><br>
    <code>Modal.setAppElement('#your-app-element');</code>  </p>
  </blockquote>
  
  <p>Unfortunately, this has not helped ! 
  I cannot figure out what <code>el</code> is supposed to represent.</p>
  
  <p>Here are some of the many property variations I have tried adding to my Modal component:   </p>
  
  <pre><code>`appElement={el}`,  
  `appElement="root"` where `root` is the id that my App component is injected into   
  `appElement={'root'}`   
  `appElement="div"`,   
  `appElement={&lt;div&gt;}`,   
  `appElement={"div"}`  
  </code></pre>
  
  <p>I've also tried calling <code>Modal.setAppElement('root');</code> from inside <code>src/index.js</code>, where <code>root</code> is the root element that my <code>App</code> component is injected into, and index.js is where I do that.  </p>