5.1: State

Class Component - Simple

In the components folder, let's create a new React Component file called ClassComponentDemo.js.

A react class component starts with an import, so let's import it:

import React, { Component } from 'react';

Component Set up

Next we'll set up a class component and export it so that it is accessible elsewhere, namely where we'll call it in the Sidebar.js file:

export default class ClassComponentDemo extends Component {


}

Notice already that this component is an ES6 class that uses the extends keyword. It's inheriting from Component which is part of React. Here we see a very practical use of the concepts learned in the last module.

Component constructor

Next, we'll add a constructor. The props parameter in the constructor is also inherited from React. We'll talk about that at great length in a future module. So let's hold off on that for now. Since we are inheriting from React, we call super so that we can use the this keyword in the constructor.

export default class ClassComponentDemo extends Component {
    constructor(props) {
        super(props);
    }
}

this.state

Let's use the this keyword. Here we'll call this.state. We have yet to talk about state, but we will in the next module. Know for now, that we are creating the initial state of our application.

export default class ClassComponentDemo extends Component {
    constructor(props) {
        super(props);
        this.state = { simpleMessage: "Welcome user!!!" };
    }
}

render()

The constructor is not required here, but in all class components in React, a render method is required. This is the JSX that gets packaged up, exported, and rendered when our component gets called.

export default class ClassComponentDemo extends Component {
    constructor(props) {
        super(props);
        this.state = { simpleMessage: "Welcome user!!!" };
    }

    render() {
        return (
            <h1>Hello</h1>
        );
    }
}

Calling the component

Review question: If we run the app right now, will anything happen?

The answer would be 'no'. Why?

The reason is that we still have to call the component.

Let's do that real quick.

1. In Sidebar.js add an import, the link and the route.

2. Feel free to run the app. You should see the following:

Welcome

At this point we're doing nothing with the state that we initialize in our constructor. Below please see how we will use that state within the application.

export default class ClassComponentDemo extends Component {
    constructor(props) {
        super(props);
        this.state = { simpleMessage: "Welcome user!!!" };
    }

    render() {
        return (
            <div className="main">
                <div className="mainDiv">
                    <h4>
                        {this.state.simpleMessage}
                    </h4>
                </div>
            </div>
        );
    }
}

Again, state infers something that shows a possibility of transmutation and that has a possibility to change based on some other factor. You don’t use state with an application that is just showing static content. As the docs themselves say, 'State is reserved only for interactivity, that is, data that changes over time'.

Here's a simple example of state that you might see everyday in class. You're on Slack, and suddenly you see that 'Paul O'Connor is typing'. They are typing a message to you and the state has changed to show that message. Then, they send the message, and the DOM reacts to that event by revealing the new message in your conversation feed. The state has changed, and a new state has been created, and the DOM is listening and waiting to hear another event. State is omnipresent in our software. What other examples can you think of?

Consider this React application: How many ways is state changing?

Calling Components inside of Components

It's important to note and remind you here that we can create another component(Class or Functional) and call it inside of the ClassComponentDemo. See the ClassComponentNotes at the bottom. Also, notice how we're calling it in the return of the render method in ClassComponenDemo:

export default class ClassComponentDemo extends Component {
    constructor(props) {
        super(props);
        this.state = { simpleMessage: "Welcome user!!!" };
    }

    render() {
        return (
            <div className="main">
                <div className="mainDiv">
                    <ClassComponentNotes />
                    <h4>
                        {this.state.simpleMessage}
                    </h4>
                </div>
            </div>
        );
    }
}

const ClassComponentNotes = function () {
    return (
        <div>
            <h1>Class Components</h1>

            <p>Class components are considered the "React way" of writing components.</p>
            <dl>
                <dt>ES6 JS Classes</dt>
                <dd>Built on these, must understand them</dd>
                <dt>must extend Component </dt>
                <dd>Class components need to extend the React Component.</dd>
                <dt>render()</dt>
                <dd>Class components must always have a render method.</dd>
                <dt>export</dt>
                <dd>Only one class component exported per file.</dd>
            </dl>
        </div>
    );
};

Such structure is quite common and allows us to easily separate concerns and work with components in a highly modularized way. To remove the ClassComponentNotes from the app, all we have to do now is remove the call. Go ahead and add the above code into your app.

Reflection

Give yourself to absorb the concept of state. This concept is a cornerstone of React. The name itself comes from this concept in state. React is designed to listen for events and 'react' to changes in the state of an application.