How can I set text value using parent and a child component

Question

I have a span in a child component that displays status text:

class LoginForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            status: ""
        };

        this.logIn = this.logIn.bind(this);
        this.setStatus = this.setStatus.bind(this);
    }

    logIn() {
        if (this.validFields()) {
            ...
        }
    }

    validFields() {
        let isValid = true;

        let username = $("#username").val().trim();
        let password = $("#password").val().trim();

        let error = "";
        if (username === "") {
            error = "Please enter your username.";
            isValid = false;
        }
        else if (password === "") {
            error = "Please enter your password.";
            isValid = false;
        }

        this.setStatus(error);

        return isValid;
    }

    setStatus(status) {
        this.setState({
            status: status
        });
    }

    render() {
        return (
            <div className="form">                  
                <input type="text" name="username" id="username" placeholder="Username" required />
                <input type="password" name="password" id="password" placeholder="Password" required />

                <button type="submit" onClick={this.logIn}>Log In</button>
                <span className="login-msg">{this.state.status}</span>
            </div>
        );
    }
}

When the user clicks button and a textbox is empty, this displays the error message. But the actual login method is in the parent component and when login fails, I want the state.status if child to be updated.

The parent looks like this:

class IndexContainer extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            logInStatus: ""
        };

        this.logIn = this.logIn.bind(this);
    }

    logIn(companycode, username, password) {
        var loginData = {
            ...
        };

        fetch("/Account/Login", {
            ...
        }).then((response) => {
            response.json().then((data) => {
                if (data.Success) {
                    window.location.href = data.ReturnUrl;
                }
                else {
                    this.setState({
                        logInStatus: data.ErrorMessage
                    });
                }
            });
        }).catch(function (err) {
            console.log(err);
        });
    }

    render() {
        return (
            <BrowserRouter>
                <Route path="/Account/Login" exact
                    render={() => <LoginForm
                        logIn={this.logIn}
                        status={this.state.logInStatus} />
                    }
                />
            </BrowserRouter>
        );
    }
}

The parent passes the loginStatus message to the child as the child's props.status. I want to get this status and put it in the state.status of child but I can't figure out what to do.

Answer 1

In react, you can use componentWillReceiveProps() to update state whenever your component gets new props.

You can read this document to get more information.

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops