React — State/Props + Virtual DOM + React Events — Part-2

Rishabh Jain
Feb 14 · 4 min read

State and Props:

These 2 makes React Dynamic. State that exists within component and Props we pass between components.

Creating Initial State and Using inside Class component:

Create a Vendor.js file with initial state containing Vendors related data:

Then calling this vendor component inside root (App.js):

How to change the state of component?

Ideally if we go by Javascript standard then we can think like just access the property we want to modify and then update:

this.state.vendorsData[0].name = “Rishabh”

But this totally wrong method and not allowed by React. We will get the warning in console like “ Do not mutate the state directly and use setState()”

So React to identify something have changed we need to do mutate state by using setState method (Provided inside class component). setState is async method so you may see the changes reflected immediately.

Now to see setState() in action. Create a function that will change the available balance according to new state and add a click button for that.

Before and After clicking:

Now with mutations of state with setState here comes one of best thing in React — Virtual DOM.

Virtual DOM is smart enough to have check on what is added / deleted / modified so it don’t have to render full DOM again.

As we know updating DOM is most complex and time consuming thing on UI, but with React Virtual Dom — this becomes very much efficient. React will compare the initial state and new state , renders the changed elements only not the same one’s. This improves the performance while working with React. So by this in above example it will only re-render the remaining balance instead of all three fields.

Tweaked updating state in some dynamic way (deducting 10 on each click):

Now there is one interesting case. We have taken new state filed pageNumber and we have mutated it with set state 4 times with different value:

Now when we display on pageNumber on click, what should be the output??

Output with multiple setState with same event

Actually what it internally do is object.assign({}, {pageNumber: 5}, {pageNumber: 2}, { pageNumber: 3})

It results into {pageNumber: 3}

Props : Properties/Data flown between different components. This may contain functions, objects(+array), strings, boolean. (We have seen in last tutorial — — )

Event Handling in React:

We will discuss the event handling by two ways:

  1. Using Anonymous function
  2. Using bind

Using Anonymous function : Calling the original function by creating a anonymous function.

Using Bind : Binding a original function( Bind returns a new function by binding the data/object passed )

Two Way Binding in React: ( Model to View and View to Model)

Here we will use the input property of html with type text. We will call the Onchange function on updating value and inside onChange function we will access the value(using event target value) and will modify the state according to this value.

In case of any query and suggestions please connect with me or drop a mail

Rishabh Jain

Written by

Full Stack Developer — React, Node, Mongo DB, Postgres, RabbitMQ, AWS, Native Performance Engineering, Lambda, Javascript, Kubernetes, Docker.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade