Why does react display my functional component at the bottom of my page?

Hugo Published at Dev

Hugo

My main page looks like this :

import React from "react";
import { Fragment } from "react";
import ModalA from "../components/Modal/ModalOptionA";

export default class AePage extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Fragment>    
        <div className="grid-intro">
          <div className="text-intro">
            Some Text
          </div>
          <div className="modal-component-insert">
            <ModalA show={true}/>
          </div>
          <div className="text-outro">
            Some text
          </div>
        </div>
      </Fragment>
    )
  }
}

And my component looks like this :

 import React from "react";
 import ReactDOM from "react-dom";

const Modal = ({ show, closed}) => {
  return (
    ReactDOM.createPortal(
      <>
      <div className="modal">
        My Component
      </div>
      </>,
    document.body
    )
  )  
}
export default Modal;

The code above display something like :

Some Text
Some Text
My Component

Why does my component not display between the texts ? Is there a specific way for React to display this component between my divs ?

Paweł Janik

That is what ReactDOM.createPortal is for. It will always move things to the bottom of the DOM. That way, you can then position it above everything else using CSS.

It seems you don't really need that, so I'd just replace your code for the Modal component with:

import React from "react";

const Modal = ({ show, closed}) => {
  return (
      <div className="modal">
        My Component
      </div>
  )  
}
export default Modal;

Collected from the Internet

Please contact [email protected] to delete if infringement.