ReactJS Constructor Tutorial

KrunalLathiya
901 views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

ReactJS Constructor Tutorial!

One of the best use of constructor is to define the initial state of the component, which is very useful for any react.js application. We can also bind any event that occurs in our component in the constructor like the following.

constructor(props){
    super(props);
    this.handleEvent = this.handleEvent.bind(this);
  }

In above’s example, the event will fire after the user has clicked the button or keyup, blur or any other event and then we need to set up the context to its parent and not the child context, so we are binding this to parent. Let me take one example to simplify this explanation.

Example

// App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
  }
  handleEvent(){
    console.log(this.props);
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App;

Now, if you run this and see in the console, then it says like this. Uncaught TypeError: Cannot read property 'props' of undefined

That means it can not find this as a global pointer or keyword or object to the component, it finds as that function property this, not a component property.

So, we need a solution to that. Make one new file, called app1.jsx in the src folder and put the code like this.

// app1.jsx
import React, { Component } from 'react';

class App1 extends Component {
  constructor(props){
    super(props);
    this.handleEvent = this.handleEvent.bind(this);
  }
  handleEvent(){
    console.log(this.props);
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App1;

Now, include this file in the main.js.

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/app.jsx';
import App1 from './app/app1.jsx';

ReactDOM.render(<App />, document.getElementById('App'));

And in above code, just replace the following line.

ReactDOM.render(<App />, document.getElementById('App'));

with this line

ReactDOM.render(<App1 />, document.getElementById('App1'));

Now, again run, you can see an empty object in the console. So now, this is pointing to the global context of the React component.

Following example will not working because, I have not use app1.jsx. You can use app1.jsx and modify the main.js as I have mentioned earlier.

Then see in the console, you can find empty object, if you got any error, then please check again the code, you might not have imported app1.jsx in the main.js.

So, we can achieve two purposes with the constructor function.

  1. Set the initial state of the component
  2. Point the global context of this keyword.

Arrow Functions

If you are using arrow functions then, you do not need to bind any event to this. In that scenario, this scope is global and not limited to any calling function. So If you are using ES6 syntax, then it is best practice to use Arrow Function

import React, { Component } from 'react';

class App2 extends Component {
 constructor(props){
   super(props);
 }
 handleEvent = () => {
   console.log(this.props);
 }
 render() {
   return (
     <div className="App">
       <button onClick={this.handleEvent}>Please Click</button>
     </div>
   );
 }
}

export default App2;

Here, I have not bind this in to the constructor.

ReactJS Constructor Tutorial
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
}
handleEvent(){
console.log(this.props);
}
render() {
return (
<div className="App">
<button onClick={this.handleEvent}>Please Click</button>
</div>
);
}
}
export default App;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content