console.clear();
const MyComponent1 = (props) => {
  return (
    <div>
    <div className="modal" style={{ display: 'block' }} tabIndex="-1">
      <div className="modal-dialog">
        <div className="modal-content">
          <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>
          <div className="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div className="modal-footer">
            { props.children }
          </div>
        </div>
      </div>
    </div>
      </div>
  )
}

const App = () => {
  return (
    <div>
      <MyComponent1>
         <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
         <button type="button" className="btn btn-primary">儲存</button>
      </MyComponent1>
    </div>
  )
}

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