Skip to content

Commit 51733c9

Browse files
authored
Add more details to the doc
1 parent 6d6211f commit 51733c9

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

docs/docs/lifting-state-up.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -300,11 +300,12 @@ Now, no matter which input you edit, `this.state.value` and `this.state.scale` i
300300

301301
Let's recap what happens when you edit an input:
302302

303-
* The `TemperatureInput` component calls `this.props.onChange()` with the new desired value.
304-
* In its `render` method, the `Calculator` has specified that `onChange` of the Celsius input is the `Calculator`'s `handleCelsiusChange` method, and `onChange` of the Fahrenheit input is the `Calculator`'s `handleFahrehnheitChange` method. So either of them gets called depending on which input we edited.
303+
* React calls the function specified as `onChange` on the DOM `<input>`. In our case, this is the `handleChange` method in `TemperatureInput` component.
304+
* The `handleChange` method in the `TemperatureInput` component calls `this.props.onChange()` with the new desired value. Its props, including `onChange`, were provided by its parent component, the `Calculator`.
305+
* When it previously rendered, the `Calculator` has specified that `onChange` of the Celsius `TemperatureInput` is the `Calculator`'s `handleCelsiusChange` method, and `onChange` of the Fahrenheit `TemperatureInput` is the `Calculator`'s `handleFahrehnheitChange` method. So either of these two `Calculator` methods gets called depending on which input we edited.
305306
* Inside these methods, the `Calculator` component asks React to re-render itself by calling `this.setState()` with the new input value and the current scale of the input we just edited.
306-
* React calls the `Calculator` component's `render` method to learn what it should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here.
307-
* React calls the `render` methods of the individual `TemperatureInput` components with their new props specified by the `Calculator`. It learns what they both should look like.
307+
* React calls the `Calculator` component's `render` method to learn what the UI should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here.
308+
* React calls the `render` methods of the individual `TemperatureInput` components with their new props specified by the `Calculator`. It learns what their UI should look like.
308309
* React DOM updates the DOM to match the desired input values. The input we just edited receives its current value, and the other input is updated to the temperature after conversion.
309310

310311
Every update goes through the same steps so the inputs stay in sync.

0 commit comments

Comments
 (0)