ReactJS Constructor Tutorial

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.

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;