CODEWITHSUNDEEP
javascriptreactjsjsx
andy wilson
andy wilson

Reputation: 970

react js can't update props from child

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

Upvotes: 0

Views: 259

Answers (2)

Pulkit Aggarwal
Pulkit Aggarwal

Reputation: 2672

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" }

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281636

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" }

Upvotes: 1

Related Questions