react js can't update props from child

Question

I have a logout button and when it's clicked nothing changes, even though there is a function call that does setState({isLoggedIn: false}) I do have a componentWillMount() function to set it in the first place to what the props is because it wasn't changing to being true when I was set in the parent.

How do I fix this as react throws no errors. I have been looking at this for a good hour now with no avail.

some code

onLogOutClick(){
    this.setState({
       isLoggedIn: false,
    )}
}

componentWillMount(){
    this.setState({
        isLoggedIn: this.props.IsLoggedIn
    }, function(){

    });
}

...

{this.props.IsLoggedIn ? (
        <ul className="nav navbar-nav navbar-right">
            <li> 
                <button 
                    onClick={() => this.onLogOutClick()} 
                    className="form-control" 
                    style={{ 
                        marginTop: "10px", 
                        color: "black", 
                        border: "none" 
                    }} 
                >
                    <span className="glyphicon glyphicon-log-out"/>
                    &nbsp;&nbsp;LogOut {this.state.Username}
                </button>
            </li>
        </ul>    
    ) : "LOGGED OUT" 
}

that changes from logged out to the button when logged in but doesnt work the other way around

you need to show more code for people to figure out what your issue is — Shubham Khatri, Jul 18 '17 at 10:35
onLogOutClick(){ this.setState{isLoggedIn: false} } should do the trick — L4reds, Jul 18 '17 at 10:43
is the function called? maybe console log something in that logout function just for debugging purpose — L4reds, Jul 18 '17 at 10:45
{this.props.IsLoggedIn .... change it to this.state.IsLoggedIn — L4reds, Jul 18 '17 at 10:48

score 1 · Accepted Answer · answered Jul 18 '17 at 11:02

1

The problem is that you are setting the local state loggedIn and not the parent state which is passed down as props but you are using the loggedIn value from props.

What you should be doing is updating the parent state so that the props are updated.

In parent:

 onLogOutClick(){
    this.setState({
       isLoggedIn: false,
    )}
}

In child:

{this.props.IsLoggedIn ? <ul className="nav navbar-nav navbar-right">
                            <li> <button onClick={() => this.props.onLogOutClick()} className="form-control" style={{ marginTop: "10px", color: "black", border: "none" }} ><span className="glyphicon glyphicon-log-out " ></span>&nbsp;&nbsp;LogOut {this.state.Username}</button></li>
                        </ul>: "LOGGED OUT" }

answered Jul 18 '17 at 11:02

Shubham Khatri

270,417
55
406
400

1

check this answer to get a detailed view of how to communicate info to parent from child https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs/38397755#38397755 – Shubham Khatri Jul 18 '17 at 11:02
i will need to pass the function through the call for the child wont I – andy wilson Jul 18 '17 at 11:05
yeah you need to pass the function to child from parent :) – Shubham Khatri Jul 18 '17 at 11:07
Happy to help :) – Shubham Khatri Jul 18 '17 at 11:07

score 0 · Answer 2 · answered Jul 18 '17 at 11:10

You can't change the value of the props in the child component without triggering the event. Here you checked the "this.props.IsLoggedIn" which is comes from the parent component and you are trying to change the state of child component. You can check the "this.state.isLoggedIn" in place of "this.props.IsLoggedIn" for correct working your code.

Code Before Editing :

 {this.props.IsLoggedIn ? <ul className="nav navbar-nav navbar-right">
                            <li> <button onClick={() => this.onLogOutClick()} className="form-control" style={{ marginTop: "10px", color: "black", border: "none" }} ><span className="glyphicon glyphicon-log-out " ></span>&nbsp;&nbsp;LogOut {this.state.Username}</button></li>
                        </ul>: "LOGGED OUT" }

Code After Editing :

{this.state.isLoggedIn ? <ul className="nav navbar-nav navbar-right">
                            <li> <button onClick={() => this.onLogOutClick()} className="form-control" style={{ marginTop: "10px", color: "black", border: "none" }} ><span className="glyphicon glyphicon-log-out " ></span>&nbsp;&nbsp;LogOut {this.state.Username}</button></li>
                        </ul>: "LOGGED OUT" }

react js can't update props from child

2 Answers2