Learn ReactJs from 0 – P10 – Lifting State Up

Tram Ho

Lifting State Up

For React applications, it is necessary to reflect the change of data, and to do that, there is a term “Lifting State Up” towards bringing the state to the parent components to use. general. So let’s see how they work.

Here we will consider an example is to create a component to measure the water temperature as follows:

The problem for us is to check if the input temperature is greater than or equal to 100 degrees, it will notify the boiling water and vice versa, it will not boil water.

With the first requirement of the problem, we will have a component to give notice when temperature information is provided.

Next we will design a Component whose task is to render the input control that allows the user to input the temperature. And temperature information will be stored and state.

For example according to ReactJS.org

According to the initial request, we have completed the application, right?

But now we have a new requirement:

The problem for us is to check if the input temperature is greater than or equal to 100 degrees, it will notify the boiling water and vice versa, it will not boil water. Also allows users to enter 2 types of degrees Celsius (C) and degrees Fahrenheit (F), both must be in sync with each other.

And our next job is as follows:

  • Separate Input from Calculator Compornent
  • Add an object to distinguish “C” or “F”

First we create a component for the input

And the Component Caculator will be updated as follows:

Now that we have met the number 1 requirement, our application has 2 inputs but the problem is that we cannot synchronize between 2 input components.

Of course, we will not be able to display the message as the original request because now each input will have a separate local state and no longer sync with the Calculator.

We will begin to process the request

Writing Conversion Functions

First we will write a function to convert the temperature back and forth between the two types are “C” and “F”.

These are two temperature converters with an input of a number. We need another function to convert from string to number to ensure that the parameters for the two functions above are correct, and it will return an empty string if the value doesn’t match.

Lifting State Up

Now we will embark on the synchronization between the two inputs and complete the function that displays whether the water is boiling or not.

Currently, our two inputs are holding values ​​in local state

And what we want is the synchronization between the two inputs, when we update the input level “C” the input level “F” will change according to the change above.

In React, using a common state is quite simple by moving the state to the parent Component and the child components will use and synchronize data for that state.

And what we need to do now:

  • We will delete the local state of TemperatureInput.
  • Moving the state of TemperatureInput outward is the Calculator Component

Once completed, our application will work as follows

  • The state now that TemperatureInput is taken from Calculator, this is the “source of truth”, ensuring that all inputs are used from the same source, reflecting the change of data.
  • When either TemperatureInput changes the value, it will update directly to the state of the Calculator.
  • When the state of the Calculator is changed, the remaining TemperatureInput will be updated as well.

Let’s perform the Component update as follows:

We will first remove this.state.temperature TemperatureInput and use this.props.temperature . We assume that this.props.temperature already exists, although they have not yet been passed from the Calculator Component and will be transmitted in the following steps.

We know that props are read-only , and how TemperatureInput can update the state of the Component Calculator through props. We can do this by defining an additional key in the TemperatureInput props, and we will be sending the update state Calculator Component via this key.

We will call it onTemperatureChange

Back to Calculator Component.

We have now updated the local area to include temperature and scale information and become the “source of truth” of the two inputs, and how do we distinguish between the two types of data?

For example as follows

When we enter a “C” input of 37, the state of the Calculator will be

And when we input 212 “F” input, the state of the Calculator will be

To accomplish this we can do the following:

See an example from ReactJs.org .

Our problem has been processed, You change the information of which input is no longer a problem, when this.state.temperature and this.state.scale are updated, the input user being entered will be kept the correct value. that the user has just entered, the remaining input will be calculated based on the updated state.

Summarized as follows

  • React will call the specified function just like the DOM calls onChange. In our case, the handChange function of TemperatureInput.
  • The handChange function in TemperatureInput will call this.props.onTemperatureChange() when there is a change of value. onTemperatureChange() is provided from Calculator via props.
  • 2 function handleCelsiusChange and handleFahrenheitChange will be called when the corresponding input changes the value, and these 2 functions will ensure the state update is exactly as we want.
  • When the two functions handleCelsiusChange and handleFahrenheitChange are called and update state this.setState() , React will raise the reRender event and re-render 2 inputs at the updated value.
  • When React re-calculates the Calculator, based on the state value, the two inputs will have the corresponding value.
    • When the props are received, TemperatureInput will render according to the newly updated value.
    • Similar to TemperatureInput, BoilingVerdict will also render according to the newly updated value and will give appropriate notice.
Share the news now

Source : Viblo