7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Dynamic Changes With State

Props are only set during initialization, but when data changes, we need to update our components accordingly. In this lesson you will learn about another core concept of React: state.

2.3 Dynamic Changes With State

Hi and welcome back to Get Started with React Native. In this lesson, we make our static app more dynamic by using state. You have already learned about props which is great but they only get called during initialization. For dynamic changes, you need to change the state of your component. The state of a component is stored in its state property. You can read from it directly, but since React needs to know when it changed and determine if it has to re-render the component, you need to use setState when changing it. Let's look at a simple example. This component is called multi color text. I has something we haven't seen yet, a constructor. A constructor of a react component takes the prompts that are passed into them. The first thing you have to do is to call super and pass the props. Otherwise React Native will straw an error. Then you have to set the state. Even if it's an empty state, you need to set it. In this case the state has a property called red text, which is set to true. When setting the initial state, you can do it directly on the property. There is no need to use set state. To demonstrate changing the state, I'm using set interval here to switch to value of red text between true and false. Here I need to use setState of course. In the render function, we can use the state to determine what to render. The style variable, either sets color to red or to blue, depending on the state. Changing state within that component is nice and all, but it isn't particularly useful for an app that needs syntax for different components. Of course you can access state and change it from outside, but the tricky part is getting a reference to the component. Well it's not that tricky actually. But you need to understand something that is called, the React component lifecycle. Which we can tap into and get a reference. Let me explain this lifecycle in a simplified version. First you have your initialization where you component's class gets initialized and the component will be mounted. Meaning it gets added to the dome of view hierarchy. There will be an initial call to render during this initialization. After mounting the component gets updated with some new state. And this will initiate a call to render sometimes to refresh the component. Finally, before removing the component, as well get unmarked from the dump and is no longer part of the fuel hierarchy. Now, since we are initializing the component inside our render method, we need to get the reference to it from there. Unfortunately, we can't just pull out the component in two variable and use it, but there is prompt called ref that receive an anonymous function of the component reference as a parameter. Here we can set it as a property on the parent component. Before use this in our app I want to make sure that one important point is clear. This is component state, not application state. It is used for updating a component's render output, not for storing information. We will learn about application state in a later lesson. Okay, let's use it in our running app. In the index file, I'm going to add the ref prop to all our run info components. It will receive an info attribute that will be set to distance info, speed info, and direction info. To use it, I'm going to add a constructor to the GetStarted component that has the correct format. A call to super and an empty state hash. Now I'm going to use setInterval until we fetch the real position to set random values. I'm going to use Math.random to get a random value between 0 and 100 for the distance. Accordingly, I do this for the speed, but with a lower value Finally, I'm flipping between North and Northwest for the direction. All this is updated every second. Right now, nothing's happening because we didn't update the run-info component. Here we need to follow the same steps for a constructor. When setting the initial state I'm going to use the props to set an initial value. Even though it doesn't set into paring component. This is a good way to get an initial state passed to the component. Okay, now in the render function, I'm going to pull out the value from the text component into a variable. If there is a property stored in the state, then we'll output it. If not, then we're going to use a dash. Passing in decimals makes it look really bad and messy again. Also the units are missing. We could format the values before passing them, but in my opinion, it is the component's responsibility to format the values. Unfortunately we don't just have numbers we want to display. This means I have to extend the run info component to accept and format decimal numbers and units. To prepare the component, I'm going to create a format value function that returns the value from the state, and replace it in the render function. A new run-info numeric component directly extends run-info, and just implements format value function, everything else is inherited. Here I'm going to format number to two decimal places and add the unit with a joint. This allows for empty units so we don't have a space at the end. All we need to do now is to switch the component in the index file, after importing the RunInfoNumeric class and set the unit. To recap, component state is used to dynamically update data and components. You can read state by accessing the state property on the object, and set set state by using the setState function. You can also update multiple state values at once. To initialize state, even if it's empty at first, use the constructor of a component where you have to call super. The ref callback on a component, let's you get and store a reference to this component. In the next lesson, we are going to use TextInput and Buttons as examples on how to handle events within React Native. See you there.

Back to the top