CODEWITHSUNDEEP
javascriptreactjsdrop-down-menureact-select
Koala7
Koala7

Reputation: 1404

React multi select hierarchy

I have two select tag

I want the values from the Select B are populated depending on the values selected in Select A.

I have reproduced a little example here where the user has to pick a league in Select A and in Select B he has to pick up the team of the league selected in Select A.

I have looked around to find similar examples in codesandbox and jsfiddle.

I need some examples or some tips on how to figure it out. I have found any.

Upvotes: 2

Views: 2355

Answers (2)

sayalok
sayalok

Reputation: 920

Take onChange on ur select and declare a function there. Inside that function catch ur selected value. and accoroding to that change ur state

export default class Chart extends Component {
  state = {
    list1: [...liga],
    list2: [...leagues]
    value: []
  };

 changeBDrop(event){
     var aVal = event.target.value;
     if (aVal === 'A') {
         this.setState({ value: // ur value })
     }else {
         this.setState({ value: // ur value })
    }

 };

  render() {
    return (
      <div>
        <div className="wrapper">
          <div className="main">
            <div className="container">
              <div className="row">
                <div className="col-xs-5 title-container" />
                <div className="col-xs-7 form-container">
                  Pick the League:
                  <select value={this.state.value} onChange={this.changeBDrop} >{listLeagues}</select>
                  <br />
                  League Teams to be selected
                  <select value={this.state.value} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

this is just a concept example which will help u to understand what you have to do

Upvotes: 1

zhuber
zhuber

Reputation: 5524

Please take a look at this code. Basically you should've restructure your data a bit for easier access (everything under one object). Then you need to track which league is selected and which team is selected. On every league change, you need to refresh your team list (basically filter required teams) like this:

const getTeams = league =>
  league && data[league]
    ? data[league].map(name => (
        <option key={name} value={name}>
          {name}
        </option>
      ))
    : [];

Of course you'll need to change your data filtering structure if the data is going to come from backend, but I hope you get the idea. For initial state I'm using first league thats defined in data object, and first team that corresponds to that league - of course you can change implementation of that how it fits your needs.

Upvotes: 3

Related Questions