Reactjs show error message in different component

Question

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);

https://jsbin.com/memukazugu/edit?js,output

Answer 1

What you need to do is share state between components.

If you want to share state with another component without passing it via a common ancestor -- maybe because the closest common ancestor is far removed -- you can manage a centralized app state.

A centralized app state lets you share state between components without worrying about how they relate to each other. As long as you connect them to the centralized app state, they can listen to and update the values they are interested in.

Some frameworks for managing a centralized app state is Baobab, Flux Redux. The fist one is a lot simpler than the others, but still supports most use cases.