Reintroducing React: V16 and Beyond/

...

/

Identifying Props being Drilled

Identifying Props being Drilled

In this lesson, we will identify and understand the props drilling in our Mini-Bank Application.

We'll cover the following...

Root Component

The root component of the application is called Root and has the implementation below:

Press + to interact
... 
import { USER } from './api'
class Root extends Component {
  state = {
    loggedInUser: null
  }
  handleLogin = evt => {
    evt.preventDefault()
    this.setState({
      loggedInUser: USER
    })
  }
  render () {
    const { loggedInUser } = this.state
    return loggedInUser ? (
      <App loggedInUser={loggedInUser} />
    ) : (
      <Login handleLogin={this.handleLogin} />
    )
  }
}

Login Component

If the user is logged in, the main component App is rendered. If not, we show the Login component.

Press + to interact
... 
loggedInUser ? (
      <App loggedInUser={loggedInUser} />
    ) : (
   <Login handleLogin={this.handleLogin} />
)
...

Upon a successful login (which doesn’t require any particular username and password combinations), the state of the Root application is updated with ...