React.js constructor() Method - GeeksforGeeks

08 Mar, 2021
A constructor is a method that is called automatically when we created an object from that class. It can manage initial initialization tasks such as defaulting certain object properties or sanity testing the arguments passed in. Simply placed, the constructor is a method that helps in the creation of objects. 
The constructor is no different in React. This can connect event handlers to the component and/or initialize the component’s local state. Before the component is mounted, the constructor() function is shot, and, like most things in React, it has a few rules that you can follow when using them.
Step 1: Call super(props) before using this.propsDue to the nature of the constructor, this.props object is not accessible straight out of the gate, which can lead to errors. An error will be thrown by this constructor:constructor() {
 console.log(this.props);
}Instead, we transfer the value of a prop to the super() function from the constructor():constructor(props) {
 super(props);
 console.log(this.props);
}When you call the super() function, the parent class constructor is called, which is in the case of a React is React.Component. 
Step 1: Call super(props) before using this.props
Due to the nature of the constructor, this.props object is not accessible straight out of the gate, which can lead to errors. An error will be thrown by this constructor:
constructor() {
 console.log(this.props);
}
Instead, we transfer the value of a prop to the super() function from the constructor():
constructor(props) {
 super(props);
 console.log(this.props);
}
When you call the super() function, the parent class constructor is called, which is in the case of a React is React.Component. 
Step 2: Never call setState() inside constructor()The constructor of your component is the ideal place to set the component’s initial state. You must set the initial state directly, rather than using setState() as you can in other methods in your class:constructor(props) {
 super(props);

 this.state = {
   name 'kapil',
   age: 22,
 };
}The only place you can assign the local state directly like that is the constructor. You should depend on setState() somewhere else inside our component instead.
Step 2: Never call setState() inside constructor()
The constructor of your component is the ideal place to set the component’s initial state. You must set the initial state directly, rather than using setState() as you can in other methods in your class:
constructor(props) {
 super(props);

 this.state = {
   name 'kapil',
   age: 22,
 };
}
The only place you can assign the local state directly like that is the constructor. You should depend on setState() somewhere else inside our component instead.
Step 3: Avoid assigning values from this.props to this.stateYou should try to avoid setting values from the properties when setting the initial component state in the constructor. We can do the following:constructor(props) {
 super(props);

 this.state = {
   name: props.name,
 };
}You wouldn’t be allowed to use setState() to change the property later. You may easily reference the property directly in your code by naming this.props.name, instead of assigning the property directly to the state.
Step 3: Avoid assigning values from this.props to this.state
You should try to avoid setting values from the properties when setting the initial component state in the constructor. We can do the following:
constructor(props) {
 super(props);

 this.state = {
   name: props.name,
 };
}
You wouldn’t be allowed to use setState() to change the property later. You may easily reference the property directly in your code by naming this.props.name, instead of assigning the property directly to the state.
Step 4: Bind events all in one placeWe can easily bind your event handlers in the constructor:constructor(props) {
 super(props);

 this.state = {
   // Sets that initial state
 };

 // Our event handlers
 this.onClick = this.onClick.bind(this);
 this.onKeyUp = this.onKeyUp.bind(this);
 // Rest Code
}
Step 4: Bind events all in one place
We can easily bind your event handlers in the constructor:
constructor(props) {
 super(props);

 this.state = {
   // Sets that initial state
 };

 // Our event handlers
 this.onClick = this.onClick.bind(this);
 this.onKeyUp = this.onKeyUp.bind(this);
 // Rest Code
}
Creating React Application:
Step 1: Create a React application using the following command.npx create-react-app foldername
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.cd foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Project Structure: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. The following example covers constructor demonstration.
App.js
import React, { Component } from 'react';  class App extends Component {    constructor(props) {      // Calling super class constructor    super(props);          // Creating state    this.state = {      data: 'My name is User'    }          // Binding event handler    this.handleEvent = this.handleEvent.bind(this);  }    handleEvent() {    console.log(this.props);  }    render() {    return (      <div >        <input type="text" value={this.state.data} />        <br></br> <br></br>        <button onClick={this.handleEvent}>Please Click</button>      </div>    );  }}  export default App;
Step to Run Application: Run the application  from the root directory of the project, using the following command
npm start
Output:
Picked
React.js-Methods
ReactJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
Axios in React: A Guide for Beginners
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
How to create a multi-page website using React.js ?
How to build a basic CRUD app with Node.js and ReactJS ?
How to Use Bootstrap with React?
How to check the version of ReactJS ?
Destructuring of Props in ReactJS