React - Learn From Scratch

Introduction

Up until now, you should be clear about the following React concepts. You should go back on the previous parts if you feel weak in any of these concepts.

What is React and how it is different from jQuery or Plain JavaScript
What is a React Element
What is JSX
What is the Function Component
Passing Data from Parent/Host Component to Child Component
Passing Data from Child Component to Host Component
Event Handling in React
What is a Class Component

In the last part, we ended with an issue/requirement (i.e. Updating UI when data is changed.)

In this part, we'll learn:

What is state property in the class component
How to use the setState function
What is shallow merging
Please review Part 1, Part 2, Part 3, Part 4, Part 5, Part 6

React updates the UI automatically when we change our data, but it doesn’t do this for all data variables. It should not be doing this for all variables, right? It can have watchers (like Angular) to see which variable is being changed and which UI should be updated. The second option is to let React know that we are updating data. React follows the second option. It introduces a special property with the name ‘state’ in the class component only. If we want React to update our UI automatically when the data changes, we need to store such data in ‘state’ property. Is it not easy? Yes, it is, but with some important points. Let’s check these points quickly and then we’ll learn with some examples.

React.Component class gives us a ‘state’ property in our class component.
We should initialize ‘state’ property in constructor. Ideally it should be an object which may contain other properties.
‘state’ property must never be updated directly e.g. this.state.data = something. Instead we should always use setState() method provided by React.

setState() function

setState() takes an object containing ‘changes’ directly or indirectly. We may pass ‘changes’ object directly to setState() function or we may pass a function to it and then that function returns ‘changes’ object.

setState(object): We can pass a ‘changes’ object to update the ‘state’ object.
setState(updaterFn,callbackFn): updaterFn function is called by React internally to update state. When React calls it, React provides current state & props to it. We return the ‘changes’ object from this function. callbackFn function is called by React when the state is updated.

setState() does shallow merging. We provide ‘changes’ object to it and it merges changes in ‘state’ object. Shallow merging means

It adds properties in ‘state’ object if ‘changes’ object contains but ‘state’ doesn’t
Matched properties are overwritten in the ‘state’ object

setState() doesn’t update ‘state’ immediately. It also doesn’t update UI immediately. When we call setState(), We are requesting React that this component & its children need to be re-rendered with the updated state.

In the following example, we’ve created a simple Counter component. When we click on the button, it increases the counter variable and shows it in the alert. We also want to show counter value on UI. But the following approach is not updating the UI.

<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type='text/babel'>
class Counter extends React.Component{
counter = 0;
handleCountMe(){
this.counter++;
alert(this.counter);
}
render(){
return (
<div class="mycontainer" >
<div>{this.counter}</div>
<button onClick={()=>(this.handleCountMe()) } >Count Me In </button>
</div>
);
}
}
ReactDOM.render(<Counter />,document.getElementById('app'));
</script>
</body>
</html>

Let’s update the above example and use the state management feature of React.

<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type='text/babel'>
class Counter extends React.Component{
constructor(props){
super(props);
this.state = {counter:0,dummy:0};
}
handleCountMe(){
//takes callback function
this.setState((currState)=>{
//Return object with 'changes'.
//This 'changes' object will be merged with 'state' object
return {counter:currState.counter+1};
});
}
render(){
return (
<div class="mycontainer" >
<div>{this.state.counter}</div>
<button onClick={()=>(this.handleCountMe()) } >Count Me In </button>
</div>
);
}
}
ReactDOM.render(<Counter />,document.getElementById('app'));
</script>
</body>
</html>

In the above example,

We added a constructor and initialized ‘state’ property with an object. We added a 'counter' property with 0 in it. We’ve added another ‘dummy’ property to it. It has no usage in this example but it is there to show one case while updating the state.
In handleCountMe() function, we have added ‘state’ update logic. It has become a little complex, we know but that is how we are going to set state. We’ve called setState method and provided it a callback function as a parameter. When React will execute this callback function internally, it will pass the current state to it. We need to return an object (with changes only). We are returning an object with a new value of the counter. Note this object doesn’t contain ‘dummy’ property as there is no change in that property. React will merge this object in ‘state’ property.
Then we’ve used this.state.counter in UI.

Let’s check some more cases to update the state for learning purposes. Let’s uncomment each case snippet to test them one by one. Details of each case are given below.

<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type='text/babel'>
class Counter extends React.Component{
constructor(props){
super(props);
this.state = {counter:0,dummy:0};
}
handleCountMe(){
//Case 1 - Will not update UI
//this.state.counter++;
//Case 2 - setState with Object
//this.setState({counter: this.state.counter + 1});
//Case 3 - setState with Object multiple times (batched)
// this.setState({counter: this.state.counter + 1});
// this.setState({counter: this.state.counter + 1});
// this.setState({counter: this.state.counter + 1});
// this.setState({counter: this.state.counter + 1});
//Case 4 - setState with updaterFn
// this.setState(function(currState, props){
// return {counter: currState.counter + 1};
// });
//Case 5 - setState with updaterFn multiple times
// this.setState(function(currState, props){
// return {counter: currState.counter + 1};
// });
// this.setState(function(currState, props){
// return {counter: currState.counter + 2};
// });
//Case 6: setState with updaterFn & callbackFn
// this.setState(function(currState, props){
// return {counter: currState.counter + 1};
// },function(){
// alert('in callback fn' + this.state.counter);
// });
// alert('outside ' + this.state.counter);
//Case 7: Updating state directly and using setState to request React for UI update
// this.state.counter++;
// this.setState({});
//Case 8: Update state inside Update & return empty object
// this.setState(function(currState, props){
// currState.counter++;
// return {};
// });
}
render(){
return (
<div class="mycontainer" >
<div>{this.state.counter}</div>
<button onClick={()=>(this.handleCountMe()) } >Count Me In </button>
</div>
);
}
}
ReactDOM.render(<Counter />,document.getElementById('app'));
</script>
</body>
</html>

Case 1

We are updating the state directly. It will change ‘state’ but UI will not be updated. We must not update ‘state’ directly as it may create unknown issues.

Case 2

We are using setState(object) method with ‘changes’ object as an argument.

Case 3

We are using setState(object) method with the ‘changes’ object as argument. We are calling this method multiple times. In this way, we are creating a batch. As React doesn’t update state immediately, we’ll notice that in fourth ‘setState()’, we’ll still have this.state.counter as 0 and we’ll see 1 on UI not 4. This has happened because following objects are passed considering state is not updated immediately.

this.setState({counter: 0 + 1});
this.setState({counter: 0 + 1});
this.setState({counter: 0 + 1});
this.setState({counter: 0 + 1});

Case 4

We are passing a function to setState() method. React calls this function internally but not immediately. When this function is called, React passes current state (at that time) to it. React also passes ‘props’ to it. What we return from this function is merged in ‘state’. We don’t need to return whole ‘state’ object but an object with properties with updated values.

Case 5

We are performing Case 4 again but multiple times. Both setState() functions will be called but state will not be updated immediately. Now React has two updaterFn functions in its queue. It will call first updaterFn by passing the current ‘state’ object to it. Currently state.counter is 0. We are adding 1 to it and returning the changes. ‘state’ will be updated with state.counter =1. Now React will call second updaterFn from queue by passing current ‘state' object to it. At this moment, state.counter is 1. We are adding 2 to it in second updaterFn. ‘state’ will be updated with state.counter=3. After all updaterFn functions are executed means state is updated, React may now re-render component & its children.

Case 6

We are passing two functions to setState() method. First is updaterFn as we discussed above. Second function is callback function and called by React when state is updated. So, if we want to do anything once the state is updated, we may do that in this callback function.

Note

As setState() doesn’t update the ‘state’ immediately, we should not expect an updated ‘state’ after function call. We’ll get 0 in alert.

Case 7

In this example, we are calling setState() after updating state directly. We are passing an empty object so it will not make any change to ‘state’ object but will notify React that UI needs to be re-rendered.

Note

We must not update the state directly. This may create issues.

Case 8

In this example, we are passing updaterFn to setState() but inside function we are updating state object directly and then returning object. This will work but we should avoid doing this.

Let’s check another example. In this example, we have only one component i.e. Profiles. We want to show these profiles on UI with a Remove button.

<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.mycontainer {
border:1px solid red;
width: 200px;
float:left;
margin-left:3px;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
</div>
<script type='text/babel'>
class Profiles extends React.Component{
mydata =[
{id: 1, name:"Bilal Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials"},
{id: 2, name:"Faisal Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 2"},
{id: 3, name:"Waqas Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 3"},
{id: 4, name:"Khurram Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 4"}
];
constructor(props){
super(props);
this.state = {data:this.mydata};
}
RemoveProfileHandler(id){
alert(id);
}
GetProfiles(){
return this.state.data.map((obj)=>{
return (
<div class="mycontainer" key={obj.id}>
<h3>{obj.name}</h3>
<a href={obj.url}>{obj.urlText}</a>;
<button onClick ={()=> this.RemoveProfileHandler(obj.id)}>Remove </button>
</div>
);
});
}//end of GetProfiles
render(){
return (
<div >
{this.GetProfiles()}
</div>
);
}
}
ReactDOM.render(<Profiles />,document.getElementById('app'));
</script>
</body>
</html>

In above example,

We’ve profiles data in an array.
We initialized ‘state’ property in constructor with our data.
GetProfiles() function is iterating data and returning ‘array’ of ‘div’ elements. Each ‘div’ element contains profile information with a Remove button. When this button is clicked, we are showing ‘id’ in alert for now.
In render() method, we are just using GetProfiles() result and returning it inside a ‘div’.

Now when users click the ‘Remove’ button, a specific profile should be removed from the UI. Remember, we can’t play with the UI now. But we can play with the data (state) so while working with React, we need to play around state to build UI and then think about state as our primary truth. React will update UI by itself for us. Can we remove the Profile box from UI when Remove button is clicked? We just need to remove a specific object from profile, that’s it. Here is the code snippet for RemoveProfileHandler. In following example, we’ve used the ‘filter’ method to create a new array without that specific profile.

RemoveProfileHandler(id){
//Find and remove element by using id
//There can be multiple ways to do this
this.setState((currState)=>{
//lets use filter and find result without id
var updatedData = currState.data.filter((obj)=> obj.id != id );
return {data:updatedData};
});
}

In the following example, We’ve added a new button on page to add a profile. We’ve also added a new function “AddProfileHandler()” to call when ‘Add’ button is clicked. We’ve created a new object for profile. Then we’ve used setState() method to update state. We’ve used array concat function to create a new array with this new object. Then we’ve returned the object.

Here is the full code with Remove & Add buttons. Also, check the ‘Remove All’ button.

<script type='text/babel'>
class Profiles extends React.Component{
mydata =[
{id: 1, name:"Bilal Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials"},
{id: 2, name:"Faisal Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 2"},
{id: 3, name:"Waqas Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 3"},
{id: 4, name:"Khurram Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 4"}
];
constructor(props){
super(props);
this.state = {data:this.mydata};
}
RemoveProfileHandler(id){
//Find and remove element by using id
//There can be multiple ways to do this
this.setState((currState)=>{
//lets use filter and find result without id
var updatedData = currState.data.filter((obj)=> obj.id != id );
return {data:updatedData};
});
}
AddProfileHandler(){
//let's create a dummy profile
var newProfile = {id: 5, name:"Bisaam",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 5"}
this.setState((currState)=>{
//lets use concat to create new array with new object
var updatedData = currState.data.concat([newProfile]);
return {data:updatedData};
});
}
GetProfiles(){
return this.state.data.map((obj)=>{
return (
<div class="mycontainer" key={obj.id}>
<h3>{obj.name}</h3>
<a href={obj.url}>{obj.urlText}</a>;
<button onClick ={()=> this.RemoveProfileHandler(obj.id)}>Remove </button>
</div>
);
});
}//end of GetProfiles
render(){
return (
<div >
<div>
<button onClick={()=> this.AddProfileHandler()} >Add dummy profile</button>
<button onClick={()=> this.setState((cs)=>
{
return {data:[]};
})}
>Remove all </button>
</div>
{this.GetProfiles()}
</div>
);
}
}
ReactDOM.render(<Profiles />,document.getElementById('app'));
</script>

Let’s check the final file we have from last part and update it to add following functionalities in it:

Show profile counter updated value on UI
Provide a Remove button to remove a profile from the UI
Provide an Add button to add a new profile to the UI

Can you try on your own to update that file? By the way, here is updated file in case if you are facing any confusion.

<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.mycontainer {
border:1px solid red;
width: 200px;
float:left;
margin-left:3px;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
</div>
<script type='text/babel'>
class Profile extends React.Component{
counter = 0;
constructor(props){
super(props);
this.state = {counter:0};
this.handleCountMe = this.handleCountMe.bind(this);
}
handleCountMe(id){
this.setState((currState)=>{
//Return state object with 'changes'
return {counter:currState.counter+1};
},function(){
//This function is executed once state is updated
if(this.state.counter >= 3){
if(this.props.onLimitCross){
this.props.onLimitCross(id, this.state.counter);
}
}
});
//Accessing state instantly after setState may show old data as setState behaves async
}
render(){
return (
<div class="mycontainer" >
<span>{this.state.counter}</span>
<h3>{this.props.name}</h3>
<a href={this.props.url}>{this.props.urlText}</a>;
<button onClick={()=>(this.handleCountMe(this.props.eid)) } >Count Me In </button>
<button onClick={()=>(this.props.onRemoveProfile(this.props.eid))} >Remove</button>
</div>
);
}
}
class Profiles extends React.Component{
LimitCrossHandler(id, counter){
alert('Current value of Counter for id:' + id + ' is: ' + counter);
}
render(){
var profilesElem = this.props.data.map(
(obj)=>(
<Profile
key={obj.id}
eid={obj.id}
name={obj.name}
url={obj.url}
urlText={obj.urlText}
onLimitCross={this.LimitCrossHandler}
onRemoveProfile={this.props.onRemoveHandler}
/>)
);
return profilesElem;
}
}
//Created a top level component
class MyApp extends React.Component{
mydata = [
{id: 1, name:"Bilal Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials"},
{id: 2, name:"Faisal Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 2"},
{id: 3, name:"Waqas Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 3"},
{id: 4, name:"Khurram Shahzad",url:"https://www.youtube.com/c/LearnInUrdu139",urlText:"Learn in Urdu Tutorials 4"}
];
constructor(props){
super(props);
this.state = {data:this.mydata};
this.RemoveProfileHandler = this.RemoveProfileHandler.bind(this);
}
RemoveProfileHandler(id){
//Find and remove element by using id
//There can be multiple ways to do this
this.setState((currState)=>{
//lets use filter and find result without id
var updatedData = currState.data.filter((obj)=> obj.id != id );
return {data:updatedData};
});
}
render(){
return (
<div class="maincontainer">
<div>
</div>
<Profiles data={this.state.data} onRemoveHandler={this.RemoveProfileHandler} />
</div>
);
}
}
ReactDOM.render(<MyApp />,document.getElementById('app'));
</script>
</body>
</html>

Practice Tasks

You may add an "Add Profile" button in the above work.
You may add a “Remove all” in the above work.
Add a new button “Select” in profile. When the user clicks on it, it highlights the profile background to show it as selected. Also, it shows the selected profile count somewhere on the page.

Extra/Bonus Learning on Shallow Merging

We’ve seen above that React uses Shallow Merging when we update state using setState(). Shallow Merging is merging one or more source objects in target object. Any new property in the source object is added in target object. Matched properties are overridden in target. It happens at one level, and no deep copying.

Shallow Merging using Object.assign() function

We can merge multiple objects in one object using the Object.assign() method.

<html>
<head>
</head>
<body>
<script >
//Shallow Merging using Object.assign
//Object.assign(target,source)
var state = {id:1,name:"Bilal", age:100,address:{city:'lahore'}};
var changeObj = {age:200,nic:'1234', address:{postcode:'122'}};
/*
Following will copy properties from source to target
It adds if a property exists in source but not in target
It overwrite if a property exists in target
It returns target object after changes.
Here 'state' is target & 'changeObj' is source
*/
state = Object.assign(state,changeObj);
//Can you check what happened to 'address' property in target?
//Answer: It found 'address' property in target and 'overwrote' it
console.log(state);
</script>
</body>
</html>

In above example, we merged ‘changeObj’ in ‘state’.

‘age’ property exists in ‘state’ so it is overridden with new value i.e. 200.
‘nic’ property is new in ‘changeObj’ so it is added in ‘state’ object
‘address’ property exists in ‘state’ so it is overridden with new value i.e. {postcode:’122’}

Are we expecting something else? If we are expecting that ‘postcode’ will be added to ‘address’ object in target, that will be deep merging. Object.assign() does ‘shallow merging’.

But what if we want to merge changes to ‘address’ object too? For such changes, we’ll have to consider ‘address’ as a separate object. Here is how we can do this:

<script >
//Shallow Merging using Object.assign
//Object.assign(target,source)
var state = {id:1,name:"Bilal", age:100,address:{city:'lahore'}};
var changeObj = {age:200,nic:'1234'};
var onlyAddObj = {postcode:'122'};
state.address = Object.assign(state.address, onlyAddObj);
state = Object.assign(state,changeObj);
console.log(state);
</script>

In the above example, we’ve created a separate object for address changes and merged it in actual address object separately. Then we updated the main ‘state’ object with relevant changes separately.

Shallow Merging using ES6 spread operator

Here is a code sample with comments

<script >
//Shallow Merging using spread operator
var state = {id:1,name:"Bilal", age:100,address:{city:'lahore'}};
var changeObj = {age:200,nic:'1234', address:{postcode:'122'}};
//Following will combine both objects and return new object
//It adds if a property exists in second but not ine one
//It overwrite if a property exists in first
state= {...state,...changeObj};
//state.address = {...state.address,...changeObj.address};
console.log(state);
</script>

Summary

In this article, we learned a very important feature of React (i.e. State Management). We learned to adjust the setState() function to set state or to tell React to re-render the current component & its children. We must not update the state directly. We also learned shallow merging with some examples.

References

https://reactjs.org/docs/react-component.html#setstate

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

React without ES6: https://reactjs.org/docs/react-without-es6.html