Formatting of cascading dropdown using react select
I have a cascading dropdown which is like below:-
Its code is like below:-
render() {
return (
<div>
<center>
<h5>
Select cluster and server type
<hr />
<select
value={this.state.selectcluster}
onChange={this.selectclusterChange.bind(this)}
>
<option>-- Select --</option>
{this.state.clusterslist.map((x) => {
return <option>{x.label}</option>;
})}
</select>
<select
value={this.state.selectserver}
onChange={this.routeChange}
>
<option>----selection disabled----</option>
{this.state.servertype.map((x) => {
return <option>{x}</option>;
})}
</select>
</h5>
</center>
</div>
);
}
}Now if i want its formatting like below:-
Here i have used react-select. Is there any way to improve formatting of my above code using react-select?
Solution 1:
I have changed the code to work like below:-
render() {
return (
<div className='container pt-5'>
<center>
<h5>
Select cluster and server type
<hr />
<Select className="custom-select"
onChange={this.selectclusterChange.bind(this)}
value={this.state.selectcluster}
options={this.state.clusterslist.map((x) => {
return {label: x.label};
})}
/>
<Select
onChange={this.routeChange}
value={this.state.selectserver}
options={this.state.servertype.map((y) => {
return {label: y};
})}
/>
</h5>
</center>
</div>
);
}
}Its working like below:-
Thanks for the helpful link and suggestions.