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

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Modal = () => {
  return (
    <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: 'white', padding: '20px', border: '1px solid black' }}>
      <p>React is a JavaScript library for building user interfaces</p>
    </div>
  );
};

const DetailsButton = () => {
  const [showModal, setShowModal] = useState(false);

  const handleShowModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <button onClick={handleShowModal}>Подробнее</button>
      {showModal && ReactDOM.createPortal(
        <Modal />,
        document.getElementById('react-id')
      )}
    </div>
  );
};

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

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