ЯсноПонятно24

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

const DetailsButton = () => { const handleDetailsClick = () => { const modalRoot = document.getElementById("react-id"); const modalDiv = document.createElement("div"); modalRoot.appendChild(modalDiv);

const handleCloseModal = () => {
  modalRoot.removeChild(modalDiv);
};

return ReactDOM.createPortal(
  <div className="modal">
    <div className="modal-content">
      <span className="close" onClick={handleCloseModal}>
        &times;
      </span>
      <p>Modal content goes here</p>
    </div>
  </div>,
  modalDiv
);

};

return <button onClick={handleDetailsClick}>Подробнее</button>; };

const App = () => { return ( <div> <h1>App</h1> <div id="react-id"></div> <DetailsButton /> </div> ); };

ReactDOM.render(<App />, document.getElementById("root"));