Using a class component to render some state data to the DOM

The React.Component base class allows us to tap into what we call the Component Lifecycle. Its methods give us control into how our components work, and if we’d like to use them, we have to build out a class component that extends the React.Component parent class:

class FooComponent extends React.Component {}

One integral part of creating components as classes is that you have the ability to set up a data object that your component might need to be concerned with by way using state as we call it and setting that object up on our constructor method. Once we have some data that we can render out to the DOM we need a vehicle that will allow us to render that data - this is achieved by returning some sort of JSX from within the life-cycle hook called render.

1. Declare your class, and extend the React.Component Base class.

class FooComponent extends React.Component {

2. Now we’ll set up our constructor and add state.

constructor() {
  super();
  this.state = {};
}

3. Render some UI and don’t forget to return some JSX

render() {
  return <div>Hello, I am Foo Component</div>;
}

Our final component should look like this.

class FooComponent extends React.Component {
  constructor() { 
    super();
    this.state = {};
  }
  render() {
    return <div>Hello, I am Foo Component</div>;
  }
} 

4. Now lets add a property to our state data. Define a message property on the state object.

this.state = { 
  message: "Hello from App State!!"
};

5. Now we have that message on our Component’s state we can use it through interpolation. In our render method lets change the the message that we are currently printing out inside of that div to reference the state object. Remember the this keyword when pointing to an object on the Class constructor.

render() {
  return <div>{this.state.message}</div>;
}

Challenge

Lets take the functionality of this class component that we built earlier and extend it just a little bit. Declare a Functional Component called RenderMessage inside this CodeSandbox.

• Make sure you declare your Props Object that will be passed into this component.
• Return a div who’s child is props.message
• Now inside of the App class pass in that RenderMessage component and pass down a message prop to RenderMessage. This message prop should be set equals to the message property on the state object.
• Once it’s all wired up properly you’ve done it!