Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Components

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Managing State Roadmap

2:33 with Laura Coronel

With the state lifted up to the top of the application, we can pass it down to any component. In this stage, you will pass state to multiple components, add items to the state and update the state based on the previous state

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    In the previous stage, we went over react's unidirectional data flow. 0:04
    It's where data flows down the component tree from the app's top level 0:10
    component down to the child components via props. 0:15
    In our scoreboard app, the player data is flowing 0:18
    down from the main app component to the child components. 0:22
    We also had local component state in the counter component, the scores state. 0:26
    As you may recall, component state is state that is local to a component and 0:32
    is usually not visible or shared outside of that component. 0:37
    Eventually, we'll create a stat component that will display the total number 0:41
    of players, and the total score, but to do that, it needs access to the score state. 0:47
    We lifted the score state up to the main app component. 0:53
    So now, two or more components have access and can share that state. 0:57
    When we lifted the score state up to the main app component, 1:01
    we lost the functionality of the counter buttons. 1:06
    We needed to create a way to communicate data upstream from a child to a parent. 1:09
    We did so by writing functions and passing them as props. 1:15
    We created an event handler in the main app component that handles the score 1:20
    change and we pass it down to the counter components on click events. 1:25
    Now that our score state has been lifted up to the top of our application, 1:30
    we can pass it down to any child component. 1:35
    In this stage, we'll build the stat component. 1:38
    Will pass the player state, down to the Stat component, 1:41
    and render the total number of players and the total score. 1:45
    We'll then create a control component called the AddPlayerForm. 1:49
    A control component is a component that renders a form 1:54
    element whose value is controlled by react with state. 1:58
    So the AddPlayerForm component will render a form element with a text 2:02
    field to enter the new players name and a submit button to submit the form. 2:07
    We'll write event handlers to add the new player to 2:12
    the existing player state using the spread operator. 2:16
    The spread operator allows us to update the state without modifying 2:20
    the existing state. 2:24
    This is exciting! We're adding new features to our scoreboard app. 2:26
    Let's get started! 2:31

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up