class Input extends React.Component {
  
  constructor(props) {
    super(props);
    this.clearCustomValidation = this.clearCustomValidation.bind(this);
    this.setCustomValidation = this.setCustomValidation.bind(this);    
  }
  
  setCustomValidation() {
    this.el.setCustomValidation(this.props.customValidity);    
  }
  
  clearCustomValidation() {
    this.el.setCustomValidation('');
  }
  
  render() {
    return (      
      <input
        {...this.props}
        ref={(el) => {this.el = el;}}
        onChange={this.clearCustomValidation}
        onInvalid={this.setCustomValidation}
        />
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <form>
          <Input type='text' required={true} customValidity="Yo dog you need to fill this box" />
          <input type='submit' value="Submit" />
        </form>

        <p>Hello World</p>
      </div>
    );
  }
}

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