Possible to show error messages outside of owner "SignIn" component in this div <div className="error_msg">error msg here</div>
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 ( <div> <div className="error_msg">error msg here</div> <form autoComplete="off"> <Input ref="password" name="password" placeholder="Password" errorMessage="Password is required" validate={this.checkRequired} /> <Input name="confirmPassword" placeholder="Confirm password" errorMessage="Passwords do not match" validate={this.checkPasswordsMatch} /> <button type="submit">Submit</button> </form> </div> ) } }); 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 ( <div> <input ref="input" name={this.props.name} placeholder={this.props.placeholder} onChange={this.handleChange} /> {this.state.hasChanged && !this.state.valid && <InputError errorMessage={this.props.errorMessage} />} </div> ) } }); InputError = React.createClass({ render() { return ( <div>{this.props.errorMessage}</div> ) } }) React.render(<SignIn />, document.body); 
