console.clear();
const MyComponent1 = (props) => {
  return (
    <div>
      <div className="modal" style={{ display: 'block' }} tabIndex="-1">
        <div className="modal-dialog">
          <div className="modal-content">
            { props.modalHeader }
            { props.modalBody }
            { props.modalFooter }
          </div>
        </div>
      </div>
    </div>
  )
}

const ModalHeader = () => (
  <div className="modal-header">
    <h5 className="modal-title">Modal title</h5>
    <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
)

const ModalBody = () => (
  <div className="modal-body">
    <p>Modal body text goes here.</p>
  </div>
)

const ModalFooter = () => (
  <div className="modal-footer">
    <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
    <button type="button" className="btn btn-primary">儲存</button>
  </div>
)

const App = () => {
  return (
    <div>
      <MyComponent1
        modalHeader={ <ModalHeader/> }
        modalBody={ <ModalBody/> }
        modalFooter={ <ModalFooter/> }
        />
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);