[Resolved] Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`

When using the react-modal package component, we see a Warning message in the console saying:

Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`

You can resolve this error either of the solutions below:

Solution 1 –

Add ariaHideApp={false} to Modal attributes.

This should work:

<Modal isOpen={!!props.selectedOption}
    onRequestClose={props.clearSelectedOption}
    ariaHideApp={false}
    contentLabel="Selected Option"
    >
</Modal>

Solution 2 –

Just include appElement={document.getElementById('app')} inside your modal like this

<Modal
className="modal"
appElement={document.getElementById('root') || undefined}
>

It will work 100% if app is your central in index.html from where react loads.

source link, shared under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .