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.

The idea is really pretty simple:

  1. 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.
  2. 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.

TODO

step by step notes to be added here

The final code from the in-class tutorial is available in this repo on GitHub for your reference.

rlmckenney/mad9135-weather-demo

Last Updated: : 10/14/2020, 11:36:12 AM