\nDue to the nature of the constructor, this.props object is not accessible directly, which can lead to errors. An error will be given by this constructor:
\n
constructor() {
\n console.log(this.props);
\n}<\/code>
\nInstead, we pass the value of a prop to the super() function from the constructor():
\nconstructor(props) {
\n super(props);
\n console.log(this.props);
\n}<\/code>
\nWhen you call a super() function, the parent class constructor is called, which is in the case of React is React.Component. <\/p>\nStep 2:<\/strong> Never call setState()<\/em><\/strong> inside the constructor()
\nThe best place to set the component’s initial state is in the constructor of your component. Instead of using setState()<\/em><\/strong> , you must directly set the initial state:
\nconstructor(props) {
\n super(props);
\n this.state = {
\n name 'kapil',
\n age: 22,
\n };
\n}<\/code>
\nThe constructor()<\/em> is the only place where you can assign the local state in this manner directly. You can use setState() somewhere else inside our component.<\/p>\nStep 3:<\/strong> Do not assign values from this.props to this.state
\nWhen setting the initial component state in the constructor, you should try to avoid setting values from the properties. We can do the following:
\nconstructor(props) {
\n super(props);
\n this.state = {
\n name: props.name,
\n };
\n}<\/code><\/p>\nLater, you wouldn’t be able to modify the property using setState(). Instead of assigning the property to the state directly, you can reference the property easily in your code by naming it to this.props.name.<\/p>\n
Step 4:<\/strong> Bind events in one location.
\nWe can easily bind your event handlers in the constructor:
\nconstructor(props) {
\n super(props);<\/p>\n this.state = {
\n \/\/ Sets that initial state
\n };
\n \/\/ Our event handlers
\n this.onClick = this.onClick.bind(this);
\n this.onKeyUp = this.onKeyUp.bind(this);
\n \/\/ Rest Code
\n}<\/code><\/p>\n
Creating a React Application:<\/h2>\n
![\"project-structure\"\/](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/03\/project-structure.png\")
<\/p>\n![\"output\"\/](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/03\/output.gif\")
<\/p>\n