5.1 Hooks, State & AJAX
# Lifting State
How do you share some application state between to two sibling components?
The answer is in the React Docs section called Lifting State Up (opens new window).
The idea is really pretty simple:
- Move the ownership of a state variable up the component tree to the lowest common parent above all of the components that will need to use that state.
- Then, pass that state down via props.
# Function Props
In addition to passing the state as props, you may also need to pass the "setState" updater function down to child components. Luckily, JavaScript allows us to easily pass a reference to a function.
# Live Coding Demo
Today we will look at building the core functionality from your recent class assignment – HTML5 Weather App. We will employ the React features that have been covered so far, including stateless function components, props, useState and useEffect.
# Link to code repo
The final code from the in-class tutorial is available in this repo on GitHub for your reference.