Join Joe Chellman for an in-depth discussion in this video "Lifting state" for state visibility, part of React for Web Designers (2018).
- [Male Instructor] Now we have a status updater…that can read messages from our little API,…and post new ones, but to see them, we have…to reload the page.…In this video, we'll fix that problem using…a very common task in React, lifting up state.…Conceptually, we'd like the post-form to update…the status list when it sends a new status…update to the API.…A relaxed data flow is one way, downhill only.…From parents to children via props.…These components share the same parent.…In other words, they're siblings,…and they're not allowed to talk to each other.…
In order for them to both be able to update…the list of messages, we need to lift that…piece of state up from the message list…into their shared parent.…So, let's switch over to our editor…and get started on that.…For our first step, we're going to…make some modifications to the message list component.…So, let's jump down to Status Message List…using Command Shift O to open our symbol browser.…And so I'm going to need to lift this state out…of here along with the helper functions that modify it.…
- Identify notable features about how React works.
- Identify good early steps for any React project.
- Explain why the little PHP app that powers our API has a way to add delay.
- Outline what a lifecycle method is.
- Recall the React convention that must be followed when adding a status message.
- Explain the purpose of React.Fragment.
Skill Level Intermediate
1. Introducing React
2. First Project: Customizer
3. Second Project: Directory Browser
4. Third Project: Status Updater
Next steps: Lots more React2m 37s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.