Modals are a core part of our UI, but we ran into a bit of an issue right at the end of the project
and realized there is a better way to work with them.  This page discusses how modals might be changed
by future teams.

- **Author**: Alex Wilkes <[adw4236@rit.edu](mailto:adw4236@rit.edu)>

# Modal Portals
Modals are a common problem in UX and common problems often tend towards a standard solution.
For modals (any pop-ups really) in react, that solution is [portals](https://reactjs.org/docs/portals.html).

The problem we faced is that our current modals (pop-up dialogs like create skill) use forms, but
so do the components that they are a child of.  This results in a form being nested inside another
form and pressing submit on one will submit the other as well.  This isn't an issue with using forms
in modals but rather an issue with where modals were rendering.

As a note, we did a [temporary fix](https://github.com/FiTRSkills/ForkInTheCode/pull/153/files) for this
that involved preventing the default form submission, if this solution is adopted, that fix should
be reverted as well.  See [#160](https://github.com/FiTRSkills/ForkInTheCode/pull/160) as well.

React portals allow a component to render their HTML into a different part of the HTML DOM hierarchy
than as a child to their parent as they normally would.  The fix to this would be incredibly easy
although we did not implement this due to our realization being so close to the end of the semester.

1. In the `/client/public/index.html` template, a secondary root would be added with the id `modals`
2. `#modals` would need to by styled (i.e. in `/client/src/index.css`) to be fixed position covering
   the entire page
3. All modals would instead of returning their plain react component, would return
   ```javascript
   ReactDOM.createPortal((
       // Component that was returned before goes here
   ), document.getElementById("modals"));
   ```
   It may even be relevant to create a new component that returns this and have that component wrap
   all modals instead.