How to render a select box based on the values of another in ReactJS?

Question

class Rent extends React.Component{

  changeModel(){
      var ele = document.getElementById('car_type').value;
      var val = document.getElementById('car_model');
      var hatch = "<option value = 'Indica'>Indica</option><option value='Swift'>Swift</option><option value = 'Logan'>Logan</option>";
      var sedan = "<option value = 'Indigo'>Indigo</option><option value='Xuv'>Xuv</option><option value = 'Accent'>Accent</option>";
      var van = "<option value = 'Omni'>Omni</option><option value='Vagon-R'>Vagon-R</option><option value = 'Bolero'>Bolero</option>";
      switch(ele){
        case 'hatchback':
              React.render(hatch,val);
              break;
        case 'sedan':
              React.render(sedan,val);
              break;
        case 'van':
              React.render(van,val);
              break;
      }

  }

    render(){
        return(
           <div id = "content">
                  <div id="content-header">

                  <div className="container-fluid">
                      <div className="widget-box">

                        <div className="widget-content nopadding">
                          <form action="#" method="get" className="form-horizontal">
                                    <div className="control-group">
                                      <label className="control-label">Car Type</label>
                                        <div className="controls" >
                                          <select id ="car_type" onChange = {this.changeModel}>
                                            <option value ="hatchback">Hatch Back</option>
                                            <option value ="van">Van</option>
                                            <option value ="sedan">Sedan</option>
                                          </select>
                                        </div>
                                    </div>

                                      <div className="control-group">
                                        <label className="control-label">Car Model</label>
                                        <div className="controls ">
                                          <select id ="car_model" placeholder = "Select Car model">                
                                          </select>
                                        </div>
                                      </div>
                                </form>
                          </div>
                        </div>
                                    </form>
                              </div>
                            </div>
            </div>
          </div>

         )
    }
}

This is my code I can't render my car_model select box based on the car_type select box.I have used reactJS render function to modify virtual DOM and also tried to modify actual DOM using .innerHTML function but none of them worked out.

you can use event.target.value instead of getElementById in changeModel() method, access the value by event.target.value. — Mayank Shukla
– Mayank Shukla, Commented Jan 12, 2017 at 7:23
in render fun, there is a mismatch of </form>, u closed form twice. — Mayank Shukla
– Mayank Shukla, Commented Jan 12, 2017 at 8:29

Jyothi Babu Araja · Accepted Answer · 2017-01-12 09:57:15Z

No need of DOM element selection and appending dynamic content to it.

Why don't you use the power of React to maintain dynamic select boxes.

One pure React approach. Try something like this.

class Rent extends React.Component {
    constructor(props) {
      super(props);
      this.cars = {
        hatchback : ['Indica', 'Swift', 'Logan'],
        sedan : ['Indigo', 'Xuv', 'Accent'],
        van : ['Omni', 'Vagon-R', 'Bolero'],
      }; //refactor your cars data into key values
      this.state = {
        currentDropdown: this.cars.hatchback //initially first selection 
      }
    }

    changeModel = (event) => {
      this.setState({ //changing state based on first selectbox value
        currentDropdown: this.cars[event.target.value]
      });
    }

    render() {
        return ( 
         <div>
          <label className = "control-label" > Car Type < /label>
          <select id ="car_type" onChange = {this.changeModel}>
            <option value ="hatchback">Hatch Back</option >
            <option value = "van" > Van < /option>
            <option value ="sedan">Sedan</option >
          </select>
          <label className="control-label">Car Model</label >
          <select id="car_model" placeholder = "Select Car model">
          {
            this.state.currentDropdown.map(item => {
              return <option key={item} value={item}>{item}</option>
            })          
          }
          </select>
         </div>
        )
    }
}
ReactDOM.render(<Rent /> , document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Mayank Shukla · Accepted Answer · 2017-01-12 07:32:49Z

1

try this:

class Rent extends React.Component{

  constructor(props){
    super(props);
    this.state={
      catType: 'hatchback',
    }
 }

 changeModel(){
    var ele = document.getElementById('car_type').value;
    this.setState({catType: ele});      
 }

 _populateModels(){

   var hatch = [ <option value = 'Indica'>Indica</option>,
                <option value='Swift'>Swift</option>,
                <option value = 'Logan'>Logan</option>];
   var sedan = [ <option value = 'Indigo'>Indigo</option>,
                <option value='Xuv'>Xuv</option>,
                <option value = 'Accent'>Accent</option>];
   var van = [ <option value = 'Omni'>Omni</option>,
              <option value='Vagon-R'>Vagon-R</option>,
              <option value = 'Bolero'>Bolero</option>];

   switch(this.state.catType){
    case 'hatchback':
          return hatch;
    case 'sedan':
          return sedan;
    case 'van':
          return van;
  }
}

render(){
    return(
        <div id = "content">
            <div id="content-header">
              <div className="container-fluid">
                <div className="widget-box">

                    <div className="widget-content nopadding">
                      <form action="#" method="get" className="form-horizontal">
                                <div className="control-group">
                                    <label className="control-label">Car Type</label>
                                    <div className="controls" >
                                      <select id ="car_type" onChange = {this.changeModel.bind(this)}>
                                        <option value ="hatchback">Hatch Back</option>
                                        <option value ="van">Van</option>
                                        <option value ="sedan">Sedan</option>
                                      </select>
                                    </div>
                                </div>

                                  <div className="control-group">
                                    <label className="control-label">Car Model</label>
                                    <div className="controls ">
                                      <select id ="car_model" placeholder = "Select Car model">
                                        {this._populateModels()}                
                                      </select>
                                    </div>
                                  </div>
                      </form>
                    </div>
                </div>
              </div>
            </div>
        </div>
     )
  }
}

Jsfiddle: https://jsfiddle.net/pyfnh7c0/

edited Jan 12, 2017 at 7:32

answered Jan 12, 2017 at 7:17

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

6 Comments

Vijay R Over a year ago

By giving this, facing the same problem

Vijay R Over a year ago

state value is not changing... changeModel() is not getting executed

Mayank Shukla Over a year ago

did u bind the function onChange = {this.changeModel.bind(this)} check the jsfiddle use the same code, it will work.

Vijay R Over a year ago

yeh in jsfiddle its working, same code in my project,, but still facing the same prob ,,, actually the state is not changing... the model select box contains default hatchback value

Mayank Shukla Over a year ago

put a console.log(document.getElementById('car_type').value) in changeModal method and check what the value it is printing.

|

Harkirat Saluja · Accepted Answer · 2017-01-12 07:06:32Z

0

You need to bind this to your onChange.

<select id ="car_type" onChange = {this.changeModel.bind(this)}>

The reason for this is that the scope of the function changes when invoked from a different context, unless you explicitly bind the function to a certain this.

Let me know if you face any difficulties after this.

answered Jan 12, 2017 at 7:06

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

1 Comment

Vijay R Over a year ago

Binding the function explicitly also didn't worked out. Still i faced the same prob

vijay singh · Accepted Answer · 2017-01-12 07:37:40Z

You should not return a string in react.render function. so it should be like this otherwise:

const  Hatch  = () => (   <select> <option value = 'Indica'>Indica</option><option value='Swift'>Swift</option><option value = 'Logan'>Logan</option></select>);
const Sedan =() =>(<select><option value = 'Indigo'>Indigo</option><option value='Xuv'>Xuv</option><option value = 'Accent'>Accent</option></select>);

and your swith case should be like this:

 switch(ele){
    case 'hatchback':
          ReactDOM.render(<Hatch/>,val);
          break;
    case 'sedan':
          ReactDOM.render(<Sedan/>,val);
          break;
    case 'van':
          ReactDOM.render(van,val);
          break;
  }

please fine fiddle link working and tested copy for reference: https://jsfiddle.net/69z2wepo/67343/

Collectives™ on Stack Overflow

How to render a select box based on the values of another in ReactJS?

4 Answers 4

Comments

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related