class CountedText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
    this.setText = this.setText.bind(this);
    this.reset = this.reset.bind(this);
  }

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

  reset(e) {
    this.setState({ text: '' });
  }

  render() {
    return (
      <p>
        <input
          type='text'
          placeholder='some text...'
          className='counted-text'
          value={this.state.text}
          onChange={this.setText}
          />

        You typed <span className='text-length'>{this.state.text.length}</span> characters
        <button className='btn-reset' onClick={this.reset}>Reset</button>
        {
          (this.state.text.length > 0) &&
            <CountedText />
        }
      </p>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <CountedText />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('main'));