title: Reactjs show error message in different component
body: <p>Possible to show error messages outside of owner "SignIn" component in this div <code>&lt;div className="error_msg"&gt;error msg here&lt;/div&gt;</code></p>
  
  <pre><code>SignIn = React.createClass({
      getInitialState() {
          return {
              password: null,
              valid: false
          }
      },
  
      checkRequired(value) {
          return !!value.trim();
      },
  
      checkPasswordsMatch(value) {
          var match = this.refs.password.getValue() === value;
          this.setState({
              valid: match,
              password: value
          });
          return match;
      },
  
      render() {
          return (
          &lt;div&gt;
              &lt;div className="error_msg"&gt;error msg here&lt;/div&gt;
              &lt;form autoComplete="off"&gt;
                  &lt;Input
                      ref="password"
                      name="password"
                      placeholder="Password"
                      errorMessage="Password is required"
                      validate={this.checkRequired}
                  /&gt;
                  &lt;Input
                      name="confirmPassword"
                      placeholder="Confirm password"
                      errorMessage="Passwords do not match"
                      validate={this.checkPasswordsMatch}
                  /&gt;
                  &lt;button type="submit"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          )
      }
  });
  
  Input = React.createClass({
      getInitialState() {
          return {
              hasChanged: false,
              valid: false
          }
      },
      handleChange(event) {
          if (this.props.validate) {
              this.setState({
                  valid: this.props.validate(event.target.value)
              });
          }
  
          this.setState({
              hasChanged: true
          });
      },
  
      getValue() {
          //return this.refs.input.value; // For React 0.14+
          return this.refs.input.getDOMNode().value;
      },
  
      render() {
          return (
              &lt;div&gt;
                  &lt;input
                      ref="input"
                      name={this.props.name}
                      placeholder={this.props.placeholder}
                      onChange={this.handleChange}
                  /&gt;
                  {this.state.hasChanged &amp;&amp; !this.state.valid &amp;&amp; &lt;InputError errorMessage={this.props.errorMessage} /&gt;}
              &lt;/div&gt;
          )
      }
  });
  
  InputError = React.createClass({
      render() {
          return (
              &lt;div&gt;{this.props.errorMessage}&lt;/div&gt;
          )
      }
  })
  
  React.render(&lt;SignIn /&gt;, document.body);
  </code></pre>
  
  <p><a href="https://jsbin.com/memukazugu/edit?js,output" rel="nofollow">https://jsbin.com/memukazugu/edit?js,output</a></p>