Why is the component not visible in the console?

Question

JavaScript

Why is the myTextAreaCounter component not visible in the console?
I assembled the project, launched it, but the link to the component is not found...

import PropTypes from "prop-types";
import React, { Component } from "react";
import ReactDOM from "react-dom";
import DOM from "react-dom-factories";

class TextAreaCounter extends Component {
  static propTypes = {
    text: PropTypes.string
  };

  static defaultProps = {
    text: ""
  };

  constructor(props) {
    super(props);

    this.state = {
      text: this.props.text
    };

    this._textChange = this._textChange.bind(this);
  }

  _textChange(event) {
    console.log("change state");

    this.setState({
      text: event.target.value
    });
  }

  render() {
    return DOM.div(null,
      DOM.textarea({
        value: this.state.text,
        onChange: this._textChange
      }),
      DOM.h3(null, this.state.text.length));
  }
}

let myTextAreaCounter = ReactDOM.render(<TextAreaCounter text = { "Alex" } />, document.getElementById("app"));

// myTextAreaCounter.setState({ text: "Hello outside world!" });

Answer 1

Because myTextAreCounter is a local variable. By the way, it is not recommended to use the rendered component .