Creating dependant fields in Reactjs?

Question

This is what i render

   1
   2

         


        

Answer 1

The following example should point you in the right direction...

var Hello = React.createClass({

  getDefaultProps: function () {
    return {
      fieldMap: {
        "1": [
          { value: "1.1", label: "1.1" },
          { value: "1.2", label: "1.2" }
        ],
        "2": [
          { value: "2.1", label: "2.1" },
          { value: "2.2", label: "2.2" }
        ]
      }
    }
  },

  getInitialState: function() {
     return {
         firstValue: '',
         secondValue: '',
         thirdValue: ''
     }
  },

  getOptions: function (key) {    
    if (!this.props.fieldMap[key]) {
      return null;
    }

    return this.props.fieldMap[key].map(function (el, i) {
        return {el.label}
    });
  },

  handleFirstLevelChange: function (event) {
    this.setState({
      firstValue: event.target.value,
      secondValue: '',
      thirdValue: ''
    });
  },

  handleSecondLevelChange: function (event) {
    this.setState({
        secondValue: event.target.value,
      thirdValue: ''
    });
  },

  handleThirdLevelChange: function (event) {
      this.setState({
        thirdValue: event.target.value
    });
  },

  getSecondLevelField: function () {
    if (!this.state.firstValue) {
        return null;
    }

    return (
        
        ---
        {this.getOptions(this.state.firstValue)}
      
    )
  },

  getThirdLevelField: function () {
    if (!this.state.secondValue) {
        return null;
    }

    return (
        
    )
  },
  render: function() {
    return (
    

        
        ---
        1
        2
      
      {this.getSecondLevelField()}
      {this.getThirdLevelField()}
    
    );
  }
});

See it live on https://jsfiddle.net/27u9Lw4t/1/