I need to change the contents of dropdown Method&Minorhead based on the selection in dropdown MajorHead using React.

If I select cheating in majorhead, then it's supposed to show a&b in minorHead and apple, orange in Method.

If I select abduction in majorhead, then it's supposed to show AB&BC in minorhead and cat, dog in Method...

import React, { Component } from 'react';

class Profile extends Component {
    render() {
        return (
            <form>
                <div className="form-group">
                    <label for="inputState">Major head</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>Cheating</option>
                        <option>Abduction</option>
                        <option>House brake</option>
                </div>
                <div className="form-group">
                    <label for="inputState">Minor head</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>a</option>
                        <option>b</option>
                        <option>AB</option>
                        <option>BC</option>
                        <option>X</option>
                        <option>Y</option>
                </div>
                <div className="form-group">
                    <label for="inputState">method</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>apple</option>
                        <option>orange</option>
                        <option>cat</option>
                        <option>dog</option>          
                </div>
            </form>
        )
    }
}
export default Profile;                

I need to change the contents of dropdown Method&Minorhead based on the selection in dropdown MajorHead using React.

If I select cheating in majorhead, then it's supposed to show a&b in minorHead and apple, orange in Method.

If I select abduction in majorhead, then it's supposed to show AB&BC in minorhead and cat, dog in Method...

import React, { Component } from 'react';

class Profile extends Component {
    render() {
        return (
            <form>
                <div className="form-group">
                    <label for="inputState">Major head</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>Cheating</option>
                        <option>Abduction</option>
                        <option>House brake</option>
                </div>
                <div className="form-group">
                    <label for="inputState">Minor head</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>a</option>
                        <option>b</option>
                        <option>AB</option>
                        <option>BC</option>
                        <option>X</option>
                        <option>Y</option>
                </div>
                <div className="form-group">
                    <label for="inputState">method</label>
                    <select id="inputState" className="form-control"/>
                        <option selected>Choose...</option>
                        <option>apple</option>
                        <option>orange</option>
                        <option>cat</option>
                        <option>dog</option>          
                </div>
            </form>
        )
    }
}
export default Profile;                

• javascript
• jquery
• reactjs

Share Improve this question Follow edited Apr 15, 2019 at 10:35 gmds 19.9k44 gold badges3737 silver badges6464 bronze badges asked Mar 12, 2018 at 16:10 kasim521kasim521 32511 gold badge44 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

For each option in your major head Select, i would create an array of supported values for method and minor.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedView: 'Cheating'
    }
  }
  
  render() {
    const { selectedView } = this.state
    const VIEWS = [
      {
        name: 'Cheating', 
        minor: ['a', 'b'], 
        method: ['apple', 'orange']
      }, {
        name: 'Abductions', 
        minor: ['AB', 'BC', 'X'], 
        method: ['cat', 'dog']
      }
    ]

    const getMajorMethod = () => {
      const view = VIEWS.filter(({name}) => name === selectedView)[0]
      return (
        <div>
          <select>
            {view.minor.map(m => <option>{m}</option>)}
          </select>
          <select>
            {view.method.map(m => <option>{m}</option>)}
          </select>
        </div>
      )
    }
    return (
      <div>
        <select onChange={(e) => this.setState({selectedView: e.target.value})}>
          {VIEWS.map(({name}) => <option value={name}>{name}</option>)}
        </select>

        {getMajorMethod()}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

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

A structure like this will allow you to (within your initial MAJOR select) map over your VIEWS and apply the name prop to the options.

You can then have another map that shows two other selects (minor & method) with the VIEWS relative minor and method arrays being their options