So I have a screen where I am showing details of a Medical Appointment, I have shown booked services in a table using a map function. Each row in table has a booked service info and reject button and accept button. I want to open a modal when any reject button is clicked,however the issue is that whenever I click any reject button the same modal opens,in other words the item.serviceData.serviceTitle shows the same name no matter which item I reject in the table row. Can someone pls tell what the issue is
class AppointmentDetails extends Component {
constructor(props) {
super(props);
this.state = {
BookedServices: [],
Details:[],
Reject_Modal: false,
Lab_note: "",
UpdatedStatus:[],
Status: "Pending Response",
updatedappointment: [],
};
this.toggleRejectModal = this.toggleRejectModal.bind(this);
}
componentDidMount() {
// const{appointmentdetails}=this.props.match.params;
const {details}=this.props.location.state;
console.log(details);
this.setState({ BookedServices: details.BookedServices });
this.setState({ Details: details });
Status: this.state.Status;
// this.setState({ UpdatedStatus: this.state.UpdatedStatus });
// console.log(this.state.BookedServices);
//map through the booked services and display the services
}
componentDidUpdate(prevProps) {
if (this.props.details !== prevProps.details) {
this.setState({
BookedServices: details.BookedServices,
Details: details,
UpdatedStatus: this.state.UpdatedStatus,
Status: this.state.Status,
});
}
}
toggleRejectModal() {
this.setState(prevState => ({
Reject_Modal: !prevState.Reject_Modal,
}));
}
render() {
// const { invoiceDetail } = this.props;
const{ BookedServices,Details, UpdatedStatus, Lab_note, Status, updatedappointment}=this.state;
// const UpdatedStatus} =this.state.UpdatedStatus;
// const{Details}=this.state;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Pending Appointments" breadcrumbItem="Appointment Detail" />
{!isEmpty(Details) && (
<Row>
<Col lg="12">
<Card>
<CardBody>
<div className="invoice-title">
<p className="float-end text-muted font-size-12">
Appointment # {Details.id}
</p>
<div className="mb-4">
<img src={lablogohere} alt="logo" height="35" />
</div>
</div>
<hr />
<Row>
<Col sm="6">
<address>
<strong>Patient Information:</strong>
<br />
{Details.PatientType==="Self"?
<div>
<h6 className="mt-2">Name : {Details.PatientData.name} </h6>
<h6>Gender : {Details.PatientData.Gender}</h6>
<h6>Contact : {Details.PatientData.contact_number}</h6>
<h6>Email : {Details.PatientData.email}</h6>
</div>
:
<div>
<h6>Name : {Details.name} </h6>
<h6>Gender : {Details.Gender}</h6>
<h6>Contact : {Details.contact}</h6>
<h6>Email : {Details.PatientData.email}</h6>
<h6>Age : {Details.age} </h6>
</div>
}
</address>
</Col>
<Col sm="6" className="text-sm-end">
<address className="mt-2 mt-sm-0">
<strong>Address:</strong>
<br />
{Details.PatientType==="Self"?
<h6>{Details.PatientData.address}</h6>
:
<h6>{Details.Address}</h6>
}
<br />
</address>
</Col>
</Row>
<Row>
<Col sm="6" className="mt-3">
<address>
<strong>Date:</strong>
<br />
{Details.ReqDate}
<br />
<br />
</address>
</Col>
{/* <Col sm="6" className="text-sm-end">
<address>
<strong>Payment Method:</strong>
<br />
{Details.PaymentType}
<br />
</address>
</Col> */}
</Row>
<Row>
<div>
<h6><strong>Patient Note:</strong></h6>
<p>{Details.Notes}</p>
</div>
</Row>
<div className="py-2 mt-3">
<Row>
<Col xs="6">
<h3 className="font-size-15 font-weight-bold">
Appointment summary
</h3>
</Col>
<Col xs="6">
<h6 className="font-size-15 text-end">PKR.{Details.Price}</h6>
</Col>
</Row>
</div>
<div className="table-responsive">
<Table className="table-nowrap">
<thead>
<tr>
<th className=" text-center">Service Name.</th>
<th className=" text-center">HomeSampling</th>
<th className=" text-center">Communication</th>
<th className=" text-center">Requested Date-Time</th>
<th className=" text-center">Status</th>
<th className="text-center">Actions</th>
</tr>
</thead>
<tbody>
{map(
BookedServices,
(item, key) => (
<tr key={key}>
<td className=" text-center">{item.ServiceData.ServiceTitle}</td>
{item.HomeSampling === true ? <td className=" text-center"><h6 style={{color:"green"}}>✓</h6></td >: <td className=" text-center"><h6 style={{color:"red"}}>X</h6></td>}
{item.Communication === true ? <td className=" text-center"><h6 style={{color:"green"}}>✓</h6></td>: <td className=" text-center"><h6 style={{color:"red"}}>X</h6></td>}
<td className=" text-center">{item.RequestedTime}</td>
<td className="text-center"> <Badge
bg="danger"
className={"font-size-12 badge-soft-warning bg-soft-warning rounded-pill"}
// color={row.badgeclass}
>
{item.BookedServiceStatus}
</Badge></td>
<td className="text-center">
<Button
color="primary"
size="sm"
className="btn-pill mx-2"
onClick={() => {
this.setState({ UpdatedStatus: [...UpdatedStatus, { BookedServiceStatus: 'Accepted', id: item.id, Lab_note:null}] });
// this.setState.UpdatedStatus( [...UpdatedStatus, {BookedServiceStatus: "Accepted", id: item.id }])
// console.log(this.state.UpdatedStatus)
this.state.UpdatedStatus.map((item, index) => {
console.log(item)
if (item.BookedServiceStatus == "Accepted") {
this.setState({Status: 'Accepted'},()=>{
console.log("Status when accepted",this.state.Status)})
} else {
this.setState({Status: 'Rejected'},()=>{
console.log("Status when rejected",this.state.Status)}
)
}
}
)
}}
>
Accept
</Button>
<Button
color="danger"
size="sm"
className="btn-pill mx-2"
// onClick={this.toggleRejectModal}
// onClick={() => this.toggleRejectModal()}
onClick={e => {
e.preventDefault();
this.toggleRejectModal();
}
}
>
Reject
</Button>
</td>
<Modal
isOpen={this.state.Reject_Modal}
toggle={this.toggleRejectModal}
scrollable={true} // to enable scrollable body
centered={true} //to center the modal vertically
backdrop={"static"} //to disable click outside the modal
size="md">
<ModalHeader className="text-center">Reject Appointment
<button
type="button"
onClick={() => this.setState({ Reject_Modal: false })}
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</ModalHeader>
<ModalBody>
<h6>Service Name: {item.ServiceData.ServiceTitle} </h6>
<h6>Requested Time: {item.RequestedTime} </h6>
<Row>
<Col md={12}>
<Formik
enableReinitialize={true}
initialValues={{
Lab_note:
(this.state && this.state.Lab_note) || "",
}}
validationSchema={Yup.object().shape({
Lab_note: Yup.string().required(
"Please Enter reason for rejection"
),
})}
onSubmit={values =>
{
this.setState({ Lab_note: values.Lab_note })
let x= this.state.Lab_note
console.log("x",x)
}}
// this.setState(prevState => ({
// BookedService: {
// ...prevState.BookedService,
// Lab_note: values.Lab_note,
// }
// ,
// }));
>
{({
errors,
status,
touched,
values,
setFieldValue,
}) => (
<Form id="Detail-form">
<div className="mb-3">
<Label className="control-label">
Note:
</Label>
<Field
name="Lab_note"
type="text"
component="textarea"
rows={3}
onChange={e => {
this.setState({
Lab_note: e.target.value,
}),
setFieldValue(
"Lab_note",
e.target.value
);
}}
className={
"form-control" +
(errors.Lab_note &&
touched.Lab_note
? " is-invalid"
: "")
}
placeholder="Enter Reason for Rejection"
/>
<ErrorMessage
name="Lab_note"
component="div"
className="invalid-feedback"
/>
</div>
</Form>
)}
</Formik>
</Col>
</Row>
<Row>
<Col className="text-end">
<button
type="submit"
className="btn"
style={{
backgroundColor: "red",
color: "white",
}}
onClick={() =>
{
this.setState({ UpdatedStatus: [...UpdatedStatus, { BookedServiceStatus: 'Rejected', id: item.id, Lab_note:this.state.Lab_note}] });
// this.setState({ UpdatedStatus: [...UpdatedStatus, { BookedServiceStatus: 'Rejected', id: item.id, Lab_note:this.state.Lab_note}] });
// this.setState((state)=>
// ({ UpdatedStatus: state.UpdatedStatus.concat({ BookedServiceStatus: 'Rejected', id: item.id ,Lab_note:this.state.Lab_note })}
// ));
this.setState({ Reject_Modal: false })
this.setState({Lab_note: ""})
this.state.UpdatedStatus.map((item, index) => {
console.log(item)
if (item.BookedServiceStatus == "Accepted") {
this.setState({Status: 'Accepted'},()=>{
console.log("Status when accepted",this.state.Status)})
} else {
this.setState({Status: 'Rejected'},()=>{
console.log("Status when rejected",this.state.Status)}
)
}
}
)
}
}
>
Reject
</button>
</Col>
</Row>
</ModalBody>
</Modal>
</tr>
)
)}
</tbody>
</Table>
</div>
<div className="d-print-none">
<Row>
<Col lg="9">
</Col>
<Col lg="3" className="text-center">
<Button
color="success"
onClick={e=>{
e.preventDefault();
// this.state.UpdatedStatus.map((item, index) => {
// console.log(item)
// if (item.BookedServiceStatus == "Accepted") {
// this.setState({Status: 'Accepted'},()=>{
// console.log("Status when accepted",this.state.Status)})
// } else {
// this.setState({Status: 'Rejected'},()=>{
// console.log("Status when rejected",this.state.Status)}
// )
// }
// }
// )
this.props.onUpdateStatus(this.state.Status,this.state.UpdatedStatus, Details.id)}}
className="btn btn-success w-md mr-6"
>
Respond
</Button>
</Col>
</Row>
{/* <div className="float-end mr-5">
<Link
to="#"
className="btn btn-success w-md mr-4"
>
Respond
</Link>
</div> */}
</div>
</CardBody>
</Card>
</Col>
</Row>
)}
</Container>
</div>
{console.log(this.state.UpdatedStatus)}
</React.Fragment>
);
}
}