title: How to properly validate input values with React.JS?
body: <p>I have a simple form. All of the components and state are held in the Page component. There are 2 display headers and 3 input fields. The first input is supposed to be text, and the second and third are supposed to be ints. When the user inputs the wrong type of data, I want to have an error message pop up next to the input field. My questions relate to best practices in React.JS</p>
  
  <p>Who decides that the value is in valid? I suppose that the only job of the input field is to direct the value back to component holding the state, so does this mean that only Page can determine if a value is valid?</p>
  
  <p>How should I then have the pop up appear? Should Page have to trigger a new boolean state element that will be passed through perp that will tell Adaptive_Input to reveal the error message?</p>
  
  <p><a href="http://jsfiddle.net/easilyBaffled/bgC6E/1/">JSFiddle</a></p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>/**
   * @jsx React.DOM
   */
  var Adaptive_Input = React.createClass({ 
      handle_change: function(){
          var new_text = this.refs.input.getDOMNode().value;
          this.props.on_Input_Change(new_text);
      },
      render: function(){
          return (
                  &lt;div className='adaptive_placeholder_input_container'&gt;
                      &lt;input 
                          className="adaptive_input"
                          type="text" 
                          required="required" 
                          onChange= {this.handle_change}
                          ref="input"
                      &gt;&lt;/input&gt;
                      &lt;label
                          className="adaptive_placeholder"
                          alt={this.props.initial}
                          placeholder={this.props.focused}
                      &gt;&lt;/label&gt;
                  &lt;/div&gt;              
                  );
      }
  });
  
  var Form = React.createClass({
      render: function(){
          return (
                  &lt;form&gt;
                      &lt;Adaptive_Input
                          initial={'Name Input'}
                          focused={'Name Input'}
                          on_Input_Change={this.props.handle_text_input}
                      /&gt;
                      &lt;Adaptive_Input
                          initial={'Value 1'}
                          focused={'Value 1'}
                          on_Input_Change={this.props.handle_value_1_input}
                      /&gt;
                      &lt;Adaptive_Input
                          initial={'Value 2'}
                          focused={'Value 2'}
                          on_Input_Change={this.props.handle_value_2_input}
                      /&gt;
                  &lt;/form&gt;
                  );
      }
  });
  
  var Page = React.createClass({
      getInitialState: function(){
          return {
              Name : "No Name",
              Value_1 : '0',
              Value_2 : '0',
              Display_Value: '0'
          };
      },
      handle_text_input: function(new_text){
          this.setState({
                  Name: new_text
              });
      },
      handle_value_1_input: function(new_value){
          console.log("===");
          var updated_display = parseInt(new_value) + parseInt(this.state.Value_2);
          updated_display = updated_display.toString();
          this.setState({
                  Display_Value: updated_display 
              });
      },
      handle_value_2_input: function(new_value){
          var updated_display = parseInt(this.state.Value_1) + parseInt(new_value);
          updated_display = updated_display.toString();
          this.setState({
                  Display_Value: updated_display
              });
      },
      render: function(){
          return(
                  &lt;div&gt;
                      &lt;h2&gt;{this.state.Name}&lt;/h2&gt;
                      &lt;h2&gt;Value 1 + Value 2 = {this.state.Display_Value}&lt;/h2&gt;
                      &lt;Form
                          handle_text_input={this.handle_text_input}
                          handle_value_1_input = {this.handle_value_1_input}
                          handle_value_2_input = {this.handle_value_2_input}
                      /&gt;
                  &lt;/div&gt;
          );
      }
  });
  
  React.renderComponent(&lt;Page /&gt;, document.body);
  </code></pre>