Can anyone help me replace this Segment with a Modal in ReactJS - reactjs

Question

can anyone help me to replace this Segment with Modal in React JS, here is the code, thanks in advance
return (
<Segment clearing style={{fontWeight: 'bold', fontSize: '20px', backgroundColor: '#f5f7fb'}}> ADD APPOINTMENT
<Form onSubmit={handleSubmit} autoComplete='off'>
<Form.Input placeholder='Customer Name' value={appointment.customerName} name='customerName' onChange={handleInputChange} />
<Form.Input type='date' placeholder='Appointment Date' value={appointment.appointmentDate} name='appointmentDate' onChange={handleInputChange} />
<Form.Input placeholder='Doctor Name' value={appointment.doctorName} name='doctorName' onChange={handleInputChange} />
<Form.Input placeholder='Service' value={appointment.service} name='service' onChange={handleInputChange} />
<Form.Input placeholder='Status' value={appointment.status} name='status' onChange={handleInputChange} />
<Button onClick={submitting} floated='right' positive type='submit' content='Submit' />
<Button onClick={closeForm} floated='right' type='submit' content='Cancel' />
</Form>
</Segment>
)

Answer 1

The below package seems perfect for your needs
https://www.npmjs.com/package/react-modal
below can be your implementation
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
};
// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#root');
function App() {
let subtitle;
const [modalIsOpen, setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
function afterOpenModal() {
// references are now sync'd and can be accessed.
subtitle.style.color = '#f00';
}
function closeModal() {
setIsOpen(false);
}
return (
<div>
<button onClick={openModal}>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<Segment clearing style={{fontWeight: 'bold', fontSize: '20px', backgroundColor: '#f5f7fb'}}> ADD APPOINTMENT
<Form onSubmit={handleSubmit} autoComplete='off'>
<Form.Input placeholder='Customer Name' value={appointment.customerName} name='customerName' onChange={handleInputChange} />
<Form.Input type='date' placeholder='Appointment Date' value={appointment.appointmentDate} name='appointmentDate' onChange={handleInputChange} />
<Form.Input placeholder='Doctor Name' value={appointment.doctorName} name='doctorName' onChange={handleInputChange} />
<Form.Input placeholder='Service' value={appointment.service} name='service' onChange={handleInputChange} />
<Form.Input placeholder='Status' value={appointment.status} name='status' onChange={handleInputChange} />
<Button onClick={submitting} floated='right' positive type='submit' content='Submit' />
<Button onClick={closeForm} floated='right' type='submit' content='Cancel' />
</Form>
</Segment>
</Modal>
</div>
);
}
ReactDOM.render(<App />, Document.getElementById("root"));