simple form and controlled input

Form.jsx

class Form extends React.Component {
  state = { value: '' }

  onChange = e => this.setState({ value: e.currentTarget.value })

  onSubmit = () => console.log('The value is ', this.state.value)

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <label>
          Value: <input value={this.state.value} onChange={this.onChange} />
        </label>
        <br />
        {this.state.value.length > 10 && <p>hey, try to keep in short</p>}
        <button type="submit">Submit</button>
      </form>
    )
  }
}