Btukfyl

I'm developing a playlist generator with the Spotify API. I'm refactoring my code in React and I'm a bit confused about lifting up state with asynchronous calls.

In my App component, I have a login function that authenticates a user then updates the state with the user information. I pass this down through a nav component to a button component that performs the function then updates the state with the user info. I need to use this user info to re render the sign in button as the user's name and photo.

class App extends Component{



    //login function

    //loginUser(){}

    return(

        <NavBar loginClicked={this.loginUser} loggedIn={this.state.loggedIn} user={this.state.curUser ? this.state.curUser: undefined}/>

    )

}

class NavBar extends Component{

    render(){

        return (

            <nav>

            <div className="logo" aria-label="sign in">

              <h1><a href="index.html">Moment Music</a></h1>

            </div>

              <SignIn loginClicked = {this.props.loginClicked} user={this.props.user ? this.props.user: undefined} loggedIn = {this.props.loggedIn} />

        </nav>

        ); 

    }

}



class SignIn extends Component{

    componentWillReceiveProps(nextProps){

        console.log(nextProps);

        return this.setState({nextProps});

    }

    render(){

        console.log(this.state.user)

        return(

        <div className='top-right'>

            {this.state.loggedIn ?

           ( //<div className="logged-in" id='logged-in' aria-label="logged in">

                <div className="logged-in" id='profile-nav-bar'>

                    <img className = "profile-img" id='profile-img' src={this.state.user.profileImg}/>

                    <h2 id='profile-name'>{this.state.user.username}</h2>

                </div>)

            //</div>)

            :

            (<div onClick={this.props.loginClicked} className="sign-in" id="sign-in" aria-label="sign in">

                <a className="btn btn-primary">Log in with Spotify</a>

            </div>)

            }

        </div>

        )

    }

}

I can get the state to update with componentWillRecieveProps but it doesn't get passed to the render method of SignIn.

Thanks for you help in advance.

You shouldn't set props as a state in child components. Your componentWillReceiveProps in SignIn is unnecessary. If SignIn component props will change, the render method will be executed. React check state's and props's changes to rerender components. In the SingIn use this.props instead this.state

If you use loginClicked method in child component and you referring to this in the function you should call with proper context. So, the best approach is the use of arrow function: loginUser = () => { // your function here }