Mentioning to a Component Instance

When a component is render(), a React component instance is created. One can gain access to this instance and it’s properties (e.g., this.props) and methods (e.g. this.setState()) in two ways.

The first way is by using the this keyword from within lifecycle methods. In the example below all of the console.log(this) statements will mention to the component instance.

See the Pen rvooeW by Bunlong (@Bunlong) on CodePen.

The other way to gain a reference to a component instance involves making use of the return value from calling ReactDOM.render(). In other words, the ReactDOM.render() function will return a reference to the top most rendered component.

See the Pen mLaarz by Bunlong (@Bunlong) on CodePen.

Note:

• The this keyword will commonly be used from within a component to access instance properties like this.props.[NAME OF PROP], this.props.children, and this.state. It will also be used to call class methods/properties, that all components share like this.setState.