I have a landing page and a search page. The landing page has radio buttons that change the global state of boolean values. The idea is when I hit the search button on the landing, the app will take me to the search page with a dropdown list. I want the dropdown list's default value to be what was selected back on the landing page
function getServiceDropdown(){
if (props.houseSitting) {
return "isHome"
} else if (props.dropInVisits) {
return "isVisit"
}
<select defaultValue={getServiceDropdown}>
<option>Boarding</option>
<option value="isHome">Home Sitting</option>
<option value="isVisit">Drop-in Visits</option>
<option>Day Care</option>
<option>Dog Walking</option>
</select>
State Block is heere for class componnent
this.state = {
bloodTypes: [
{ value: "Seçiniz", name: "Choose" },
{ value: "0 RH -", name: "0 RH -" },
{ value: "0 RH +", name: "0 RH +" },
{ value: "A RH -", name: "A RH -" },
{ value: "A RH +", name: "A RH +" },
{ value: "B RH -", name: "B RH -" },
{ value: "B RH +", name: "B RH +" },
{ value: "AB RH -", name: "AB RH -" },
{ value: "AB RH +", name: "AB RH +" },
],
On Change function is heere for class componnent
onChangeData = (type, event) => {
const stateData = this.state;
if (event === "" || event === "Choose")
stateData[type] = undefined
else
stateData[type] = event
this.setState({ stateData });
}
Select option component is heere for class componnent
<select value={this.state.bloodType} onChange={e =>
this.onChangeData("bloodType", e.target.value)}>
{this.state.bloodTypes.map((type, index) =>
<option
key={index}
value={type.value}>{type.name}</option>
)
}
</select>
....... ......