I have a ionSelect in my application with which I am trying to show selected test on event "onIonChnage" in the table as table row. the state gets updated but the map loop do not return/display the table row as expected. I have searched on the web but could not find any solution. Any help will highly be appriciated! I am sharing the code as well:
import {
IonBackButton,
IonButton, IonButtons,
IonContent, IonDatetime,
IonHeader, IonIcon, IonImg,
IonInput,
IonItem,
IonLabel,
IonList,
IonPage, IonSelect, IonSelectOption,
IonTitle,
IonToolbar,
IonGrid, IonRow, IonCol,
} from '@ionic/react';
import './BookApointment.scss';
import React, {useEffect, useState} from "react";
import {Link} from "react-router-dom";
import {arrowBackOutline, chevronDownOutline, closeCircleOutline} from "ionicons/icons";
import Cookies from "universal-cookie";
import axios from "axios";
import { BASE_URL, URL } from "../BaseUrll";
const cookies = new Cookies();
const BookAppointment: React.FC = () => {
const [firstName, setFirstName] = useState<string>();
const [lastName, setLastName] = useState<string>();
const [guardianName, setGuardianName] = useState<string>();
const [gender, setGender] = useState<string>('Male');
const [email, setEmail] = useState<string>();
const [address, setAddress] = useState<string>();
const [phoneNumber, setPhoneNumber] = useState<string>();
const [user, setUser] = useState<any>({});
const [maritalStatus, setMaritalStatus] = useState<any>('Married');
const [collectionCenter, setCollectionCenter] = useState<any>('1');
const [collectionCenters, setCollectionCenters] = useState<any>([]);
const [availableTests, setAvailableTests] = useState<any>([]);
const [selectedTests, setSelectedTests] = useState<any>([]);
const [tests, setTests] = useState<any>('1');
const [count, setCount] = useState<any>(null);
const options = {
cssClass: 'select-dropdown'
};
useEffect(() =>{
let url = URL + "/collection-center";
axios
.get(url, {
headers: { Authorization: `Bearer ${cookies.get('access_token_lims')}` },
})
.then((res) => {
setCollectionCenters(res.data.data);
if(res.data.data.length > 0){
setCollectionCenter(res.data.data[0].id);
}
})
.catch((error) => {
console.log(error);
});
url = URL + "/test";
axios
.get(url, {
headers: { Authorization: `Bearer ${cookies.get('access_token_lims')}` },
})
.then((res) => {
setAvailableTests(res.data.data);
})
.catch((error) => {
console.log(error);
});
},[]);
const test_selection = async (e:any) =>{
if(e.detail.value != 'choose'){
var userSelectedTests = selectedTests;
if(!userSelectedTests.includes(e.detail.value)){
userSelectedTests.push(parseInt(e.detail.value));
setSelectedTests(userSelectedTests);
}
}
}
const removeTestFromSelection = async (idx:any) =>{
var userSelectedTests = selectedTests;
const index = userSelectedTests.indexOf(idx);
userSelectedTests.splice(index, 1);
await setSelectedTests(userSelectedTests);
}
return (
<IonPage>
<IonHeader className="header-center">
<IonToolbar color="primary">
<IonButtons slot="start">
<IonBackButton text="" icon={arrowBackOutline} defaultHref=""/>
</IonButtons>
<IonTitle>Book an Appointment</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="ion-padding">
<div className="booking-container">
<div className="booking-info">
<IonList lines="none">
<IonItem className="custom-input">
<IonInput value={firstName} type="text" placeholder="First Name"
onIonChange={(e)=>{}} clearInput></IonInput>
</IonItem>
<IonItem className="custom-input">
<IonInput value={lastName} type="text" placeholder="Last Name"
onIonChange={(e)=>{}} clearInput></IonInput>
</IonItem>
<IonItem className="custom-input">
<IonInput value={guardianName} type="text" placeholder="Guardian Name"
onIonChange={(e)=>{}} clearInput></IonInput>
</IonItem>
<div className="select-list">
<IonIcon icon={chevronDownOutline}/>
<IonSelect value={gender} interface="action-sheet" interfaceOptions={options}
onIonChange={(e) =>{}}>
<IonSelectOption value="Male">Male</IonSelectOption>
<IonSelectOption value="Female">Female</IonSelectOption>
</IonSelect>
</div>
<IonItem className="custom-input">
<IonInput value={email} type="email" placeholder="Email"
onIonChange={(e)=>{}} clearInput></IonInput>
</IonItem>
<IonItem className="custom-input">
<IonInput value={phoneNumber} placeholder="Phone Number"
onIonChange={(e)=>{}} clearInput></IonInput>
</IonItem>
<IonItem className="custom-input">
<IonDatetime className="ion-text-right" placeholder="DD MMMM YYYY" displayFormat="DD MMMM YYYY" onIonChange={(e) => {}}></IonDatetime>
</IonItem>
<IonItem className="custom-input">
<IonInput value={address} type="text" placeholder="Guardian Name"
onIonChange={(e)=>{}} clearInput></IonInput>
</IonItem>
<div className="select-list">
<IonIcon icon={chevronDownOutline}/>
<IonSelect value={maritalStatus} interface="action-sheet" interfaceOptions={options}
onIonChange={(e)=>{}}>
<IonSelectOption value="Married">Married</IonSelectOption>
<IonSelectOption value="Unmarried">Unmarried</IonSelectOption>
</IonSelect>
</div>
<div className="select-list">
<IonIcon icon={chevronDownOutline}/>
<IonSelect value={collectionCenter} interface="action-sheet" interfaceOptions={options}
onIonChange={(e)=>{}}>
{collectionCenters.map((item:any, index:any)=>{
return(
<IonSelectOption key={index} value={item.id}>{item.name}</IonSelectOption>
);
})}
</IonSelect>
</div>
<div className="select-list">
<IonIcon icon={chevronDownOutline}/>
<IonSelect value={'choose'} interface="action-sheet" interfaceOptions={options}
onIonChange={(e)=>{test_selection(e)}}>
<IonSelectOption value='choose'>Choose a Test</IonSelectOption>
{availableTests.map((item:any, index:any) =>{
return(
<IonSelectOption key={index} value={index}>{item.name}</IonSelectOption>
);
})}
</IonSelect>
</div>
</IonList>
<div className="test-table-wrapper">
<table className="test-table">
<thead>
<tr>
<th>Test Name</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{selectedTests.map((item:number, index:any) =>{
console.log(selectedTests);
<tr key={index}>
<td>{availableTests[item].name}</td>
<td>{availableTests[item].amount}</td>
<td><IonIcon onClick={() =>{removeTestFromSelection(index);}} icon={closeCircleOutline}/></td>
</tr>
})}
</tbody>
</table>
</div>
<IonButton expand="block" className="custom-btn">Book Appointment</IonButton>
</div>
</div>
</IonContent>
</IonPage>
);
};
export default BookAppointment;
