Passenger widget

ReactJS

by Sparrow Squire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="passengerWidget"></div>

JavaScript 1.7

var passengers =  [...Array(13).keys()];
var ages = [...Array(101).keys()];
        
class PassengerComponent extends React.Component {
   
    constructor(props) {
        super(props);
        this.state = {
            passengers: '2',
            ages: ["30", "30"]
        };
    }

    handlePassengers(e) {
    	this.setState({passengers: e.target.value});
    }

    handleAges() {
      var optionValues = [];
  		
      $('.ages').each(function() {
        optionValues.push($(this).find('option:selected').val());
      });
      this.setState({ ages: optionValues },function() {
        console.log(optionValues);
        console.log(this.state.ages);
      });
    }

    render(){
      var passNum = passengers.map(function(obj, index) {
      		return <option key={ obj } value={ obj }>{ obj }</option>;
      });
      
      var displayAges = [];
      var ageOptions = ages.map(function(obj, index) {
      	return <option key={ obj } value={ obj }>{ obj }</option>;
      });
      var i;
      for (i = 1; i <= this.state.passengers; i++) {displayAges.push(
      		<div className="ages" key={ i }>
          	<label htmlFor="passengerAge{ i }">Passenger { i }</label>
            <select id="passengerAge{ i }" onChange={this.handleAges.bind(this)}>
            	{ ageOptions }
            </select>
          </div>);
      		
      }
      $('.ages').append(<label htmlFor="passengerAges">Ages</label>);
      
      
      return (
        <div>
          <label htmlFor="passengerNumber">Passengers</label>
         	<select id="passengerNumber" onChange={this.handlePassengers.bind(this)} value={this.state.passengers}>{ passNum }</select>
          
          { displayAges }
          
        </div>
      );
    }
}


ReactDOM.render(
  <PassengerComponent passengers={passengers} />,
  document.getElementById('passengerWidget')
);