Avoid passing props deeply by using React Context

I would've much preferred to have had the option to access to the code in it's beginning state rather than completed state. That way I could've coded along as it sticks in my head better that way :(

Ditto to what @Steve said. IMO it makes little sense to be provided with the 'final' code instead of the code to be refactored.

On the plus side. We can use this code to code along in the following lessons, although that doesn't help with this first lesson

I'll see if there's a way I can provide the before + after versions of the code here, but in the meantime, here's the 'before' code.

Awesome! Thanks for the quick reply, and for the link to the repo... and for the great tutorial.

+1 Thanks for the 'before' code :)

What do you use to instantly remove a prop on a react component ? You seem to be typing a keystroke to make it disappear

from:

"Counter value={someValue}"

to

"Counter"

@Etenne-Joseph It's probably a vim command (I'm using the vscode-vim plugin throughout the lessons). At 3:22 for example, I'm putting the cursor at the beginning of currentUser, then typing "df " (d, f, spacebar) which deletes up-through-and-including the next space character.

I would've much preferred to have had the option to access to the code in it's beginning state rather than completed state. That way I could've coded along as it sticks in my head better that way :( < Absolutely agree with you. The course doesn't have a sense for me

Every time I made change and its logging out . How to fix this ?

@Md. Anam Hossain - Being "logged in" only means that the user is set to something non-null, so you can temporarily set the user to a hardcoded value so that the app will render in a logged-in state. I did that a few times while building the examples.

@Dave thank for the reply. Solved this problem by converting class to functional component.

function Root(){
  const [currentUser, setCurrentUser] = React.useState(JSON.parse(window.localStorage.getItem('currentUser')) || null);

  React.useEffect( () => {
    window.localStorage.setItem('currentUser', JSON.stringify(currentUser));
  }, [currentUser])

  const handleLogin = user => {
    setCurrentUser(user);
  };

  const handleLogout = () => {
    setCurrentUser(null);
  };
  return currentUser ? 
      <UserContext.Provider value={currentUser}>
        <MainPage
          currentUser={currentUser}
          onLogout={handleLogout}
        />
      </UserContext.Provider>
    : 
      <LoginPage onLogin={handleLogin} />
    ;
}