Avoid passing props deeply by using React Context

Share this video with your friends

Send Tweet

Passing data deep through a React app usually involves tedious passing of props or a complex solution like Redux. Here you’ll learn how to simplify an app that’s currently passing data with props by refactoring it to use React’s Context API.

Steve
Steve
~ 6 years ago

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 :(

coisnepe
coisnepe
~ 6 years ago

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

Steve
Steve
~ 6 years ago

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

Dave Ceddia
Dave Ceddia(instructor)
~ 6 years ago

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.

coisnepe
coisnepe
~ 6 years ago

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

Eric Laursen
Eric Laursen
~ 6 years ago

+1 Thanks for the 'before' code :)

Etenne-Joseph Charles
Etenne-Joseph Charles
~ 5 years ago

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"

Dave Ceddia
Dave Ceddia(instructor)
~ 5 years ago

@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.

anna
anna
~ 5 years ago

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

Md. Anam Hossain
Md. Anam Hossain
~ 4 years ago

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

Dave Ceddia
Dave Ceddia(instructor)
~ 4 years ago

@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.

Md. Anam Hossain
Md. Anam Hossain
~ 4 years ago

@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} />
    ;
}