Formatting of cascading dropdown using react select

Question

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?

by format, do you mean you want to style it the same? if you do then yes you can use react-select for already built components but you can also style it yourself using bootstrap, tailwind, or regular css. — KyleRifqi, Jan 23 '22 at 09:56
Yes i meant styling the same way, unfortunately am not able to figure out how to use react select here, in other code i used like this — Sarvesh Agarwal, Jan 23 '22 at 10:01
Does this answer your question? [How do I make a placeholder for a 'select' box?](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) — Siddharth Seth, Jan 23 '22 at 10:02
No I want to use react select in this code as it gives a different formatting. — Sarvesh Agarwal, Jan 23 '22 at 10:19

score 1 · Accepted Answer · answered Jan 24 '22 at 04:32

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.

Formatting of cascading dropdown using react select

1 Answers1