Class Components in React

As discussed in our previous article, React lets us define components as classes or functions. we have discussed about Function Components in our last article and In this article, we will understand Class Components.

To define a React component class, We have to create a class and extend React.Component class. Lets say we want to create an Employee Component and this Component should return the Element which displays Employee Details.

Open Index.js file from our Demo-Project, Create Employee class and extend it from React.Component. Output of any Class Component we create is dependent on the return value of a Method Called render(). The render() method is the only required method needs to be implemented in a class component.

lets create a div element which displays employee details like ID, Name , Location, Salary and return the div from this Method. To access the attributes that will be passed to this Component Class, in React we use this.props. Attribute Name. this.props contains the props that were defined by the caller of this component.

class Employee extends React.Component {
  render(){
    return <div>
      <h2>Employee Details...</h2>
      <p>
        <label>Name : <b>{this.props.Name}</b></label>
      </p>
      </div>;
  }
}

Calling the Class Component and rendering remains as same as the Function Component.

const element=<Employee Name="p4n"/>

ReactDOM.render(element,document.getElementById("root"));

Lets save these changes, navigate to the browser and we can see the output.

Now lets create Department Component also as Class Component. So we create a Class, Name it as Department and extend React.Component. We will return an Element which displays Department Information like Department Name, Head of the Department Name and Use this Component in Employee Component.

class Employee extends React.Component {

  render(){
    return <div>
      <h2>Employee Details...</h2>
      <p>
        <label>Name : <b>{this.props.Name}</b></label>
      </p>
      <Department Name={this.props.DeptName}/>
      </div>;
  }
}

class Department extends React.Component {

  render(){
    return <div>
      <h2>Department Details...</h2>
      <p>
        <label>Name : <b>{this.props.Name}</b></label>
      </p>
      </div>;
  }
}

const element=<Employee Name="p4n" DeptName="Dev"/>

ReactDOM.render(element,document.getElementById("root"));

Props are Read-Only

Whether we declare a component as a function or a class, it must never modify its own props.

To understand this with an Example, lets go and add a Constructor to the Employee Component Class and inside the Constructor, lets try to log the Property Object.

constructor(){
   console.log( this.props);
  }

This Code will throw the Error and It is expecting us to call the Base Class Constructor and we do that by using Super();

After adding the Base Class Constructor call, if we look at the Console in the browser, we get props value as undefined. To make sure that props object can be accessed in constructor, we have to add this parameter to the constructor and pass that to the base class constructor as well. Now if we save this, we can see that object data in the Console log.

Now if we try to Change the Salary using props object, we can see an error and error says.

React is pretty flexible but it has a single strict rule. Props are read-only. Of course, application UIs are dynamic and change over time. a new concept named “state” allows React components to change their output over time in response to user actions without violating this rule. By now we are clear on how to create function component and A Class Component. Then the obvious question is when to use which one?

If we are expecting features like

1. Managing State of the Components

2. Adding Life Cycle Methods to Components

3. Need to Write Logic for Event Handlers

Then we will go for Class Component and in rest of the cases we can go for Function Component.