Lifting State Up

• Often, several components need to reflect the same changing data.
• We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.

Adding a Second Input

Writing Conversion Functions

To Celcius: 40

To Fahrenheit: 51.782

Functional: 50.396

Lifting State Up

Currently, both TemperatureInput components independently keep their values in the local state:

• In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called “lifting state up”.
• We will remove the local state from the TemperatureInput and move it into the Calculator instead.
• We know that props are read-only.
• When the temperature was in the local state, the TemperatureInput could just call this.setState() to change it.