Build React Apps | App State Management | Practical Examples 03

Video Tutorial

Overview

In the Last Tutorial we have covered the Basic Concepts behind React Components and how they actually get rendered but one thing still missing for you in order to be able to use it efficiently as well as freely manage its state, well react allows use to update (Rerender and Apply Changes) to an already rendered component to the DOM and Alter it’s data depending on a specific state or event or property, also since React uses a Performance Friendly system for updating and applying changes to altered state components where it creates a Virtual DOM in order to keep things seperated and optimized.

So we will talk about the best way for updating components and update its elements wether depending on a specific event or a property change.

Updating Component State

React let you store all the changeable data inside a state object, so later on you can update or delete a specific data and let react Rerender the Component for you in order for the changes to take effect, so first, let’s initialize a state object on the constructor.

So we will try to create an input filed for entering our Hobbit and a text container (h3 text element) to display the text on the input filed, this will allow us to demonstrate how the state can be updated.

We create an empty text attribute for storing the input text.

constructor(props) {
  super(props);
  this.state = { 
    text: "Your Hobbit..."
  };
  //We define the text that is going to be rendered under the text element and updated 
}

Now let’s render the elements (Input filed and a text element), we will use bootstrap for adding a little bit of style to the elements

render() {
    return (

{this.state.text}

); } //We use the Onchange Event to store the input text each time it gets changed

Under the h3 element, we use the state.text in order to tell it to render the input text since later on, we are going to store the text under the state object.

Also, As you can see we have used the onChange event, and add a listener to the event which is the handleInputChange method under our class context, so under this method we will store the typed text and store under our state object

handleInputChange(e) {
  //Check if the Input is Empty
  if (e.target.value == "") { 
    /*We use the setState for updating a state so react would no that something has changed and 
     treys to Rerender the component */
    this.setState({
      text: "Enter your Hobit..."
    });
   }
  else { 
  //We set the state using the event that we receive to get the input text 
  this.setState({ text: e.target.value });
  }
}

Now you can open up the web page in order to test if the text gets change.

Ok, let’s try to add a new text element that is going to hold a number and a button that is going to be used to increment the number whenever we click it, in this case, we will see how we can use the setState method in another format that is very important for us.

...
render() {
  ...
  return (

{this.state.counter}

{ this.SetState( (prevState) => ( {counter: prevState.counter + 1} ) ) } }>Increment++ ); /* Now we pass in the setState method a callback that holds the previous state as an argument so we can get the previous value of the counter and increment it by counter = lastCounter + 1 */ } ...

); }

We can directly define the callback (and Inline definition) without defining a class method then referencing it in the event listener on the onClick event.

Here We use the second definition of the setState method takes a callback as an argument and gives us the previous state object so we can use it in order to increment the counter by one also, make sure to wrap the state object under the callback between parentheses so it would know that this is an object and not the function scope.

Now try to press the button and the number should increment, Cool!

So this is how actually you can use the state in order to update a React Component and Rerender the elements in order to apply the changes to the DOM also, React gives you an optimized rendering and DOM Updating so you will get a performance friendly apps.

What’s Next

In the Next Video Tutorials, we will try to create something cool with React and see how multiple components can works together Also we will Cover Flux since it helps in state management and Events Delegation.

No Comments Yet