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


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 ?

Source: React – Stack Overflow

November 24, 2021
Category : News
Tags: react-component | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.