Formation React : Les portails

Les portails vont vous permettre de monter un composant sur un élément spécifique du DOM tout en le gardant dans votre élément react. Cela permet par exemple de créer une boite modale qui sera à la racine du body sans avoir à changer la structure de vos composants.

import React from "react";
import {createPortal} from 'react-dom'

function Modal({ onClose }) {
  return createPortal(
    <>
      <div
        className="modal fade show"
        tabIndex="-1"
        role="dialog"
        style={{ display: "block" }}
      >
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Modal title</h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true" onClick={onClose}>
                  &times;
                </span>
              </button>
            </div>
            <div className="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-secondary"
                data-dismiss="modal"
                onClick={onClose}
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="modal-backdrop fade show"></div>
    </>, document.body
  );
}