States in React:

Introduction to states:

States are instances of a class component (note that functional components do not offer states) that can be defined as having many individual information. All the information mentioned in a particular state, can be utilized to render different things on screen.

States can be changed for the same component and the output can be updated as a response to user action or system event.

States vs. Props:

Props are immutable i.e. once set cannot be changed. On the other hand, States are mutable. The properties once set in a state can be changed anytime we want.
States can only be used in class components whereas Props have not that limitation.
While Props are set by the parent component, State is generally updated by event handlers.
Props allow you to pass data from one component to other components whereas State holds information about the components.
Props make components reusable whereas States have nothing to do with reusability of a component.
Props are external and controlled by whatever renders the component whereas The State is internal and controlled by the React Component itself.

Defining and using states:

States can be defined in following two ways:

Inside the class (Without Constructor).
Inside the constructor of the class (With Constructor).

Inside the class (Without Constructor): State is written as the very first module of a component. Consider the code below:

class Intro extends Component {
    state = {
        name: "Shashi",
        designation: "Faculty"
    }
    render(){
        return(
            <div>
<h2>Hi! {this.state.name}</h2>
<h2>You are a {this.state.designation}</h2>
            </div>
        );
    }
}
export default Intro;

Here in this code:

Look at the way state is defined.
See that there are two properties- name and designation, are given two values.
Also see that first one is ended by a comma while the last is not.

Now the properties defined in the state will be used by the render() function of same component.

The syntax to use properties of a state is:

<h2>Hi! {this.state.name}</h2>

You can simply understand that the output will be: Hi! Shashi

Here, Hi! Is written in the h2 and Shashi comes from this (meaning the same component).state (meaning the state).name (meaning the property)

Also keep in mind that states cannot be used by any other component.

Inside the constructor of the class (With Constructor): As we already know, constructor is a method that creates new objects for any class. Somewhat similar to that, we have a method constructor() in React that has to be defined to hold the state in it. Another method super(); has to be called as the very first statement in the constructor. Consider the code below:

class Intro extends Component {
    constructor () {
        super ();
        this.state = {
            name: "Shashi",
            designation: "Faculty"
        }
    }
    render(){
        return(
            <div>
                <h2>Hi! {this.state.name}</h2>
                <h2>You are a {this.state.designation}</h2>
            </div>
        );
    }
}
export default Intro;

Here in this code:

Look at the way constructor is defined.
See that there is a method super(); called as the first statement of the constructor.
Also see that the state is defined by appending this keyword.
Rest of the things are same as were in the previous way.

The output of this code will again be the same as of previous:

Hi! Shashi You are a Faculty

NOTE: The reason behind calling super(); method first, is the theory that every child class constructor must first call the parent class (or super class) constructor. Here, since Intro is the child class having component as super class; it must first call the constructor of component class.

Using props as part of states:

As we have discussed earlier, props are external entities that can be passed as argument within components. Props can be passed not only to a component but to a state of a component as well.

In order to use props under state, the props must be passed first to the constructor then to the super(); method. Then only we can assign the respective prop to a state property. Consider the code:

class Intro extends Component {
    constructor (props) {
        super (props);
        this.state = {
            name: "Shashi",
            designation: "Faculty",
            qlf: this.props.attr
        }
    }
    render(){
        return(
            <div>
                <h2>Hi! {this.state.name}</h2>
                <h2>You are a {this.state.designation}</h2>
                <h2>You have qualified {this.state.qlf}</h2>
            </div>
        );
    }
}
export default Intro;

Here in this code:

See how props are passed to the constructor and to the super(); method.
See that there is another property qlf in the state that holds the prop.
Rest of the things are same as were in previous ways.

The output of this code will again be the same as of previous:

Hi! Shashi You are a Faculty You have qualified B Level

Here Hi! (in the first line), You are (in the second line) and You have qualified (in the third line) are being returned as headings form the same component. Shashi (in the first line) and Faculty (in the second line) are coming from the state defined above.

B Level comes from another component named Home as props.

See the code of Home component below for reference:

class Home extends Component {
    render(){
        return(
            <div>
                <Intro attr="B Level"/>
            </div>
        );
    }
}
export default Home;