JAVASCRIPT

react class component input text with clear button

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      data: ''
    }
    this.updateState = this.updateState.bind(this);
    this.clearData = this.clearData.bind(this);
    };
  updateState(e) {
    this.setState({data: e.target.value});
  }
  clearData() {
    this.setState({data: ''});
    ReactDOM.findDOMNode(this.refs.myInput).focus();
  }
  render() {
    return (
    <>
        <input type="text" value = {this.state.data} onChange = {this.updateState} ref = "myInput"/>
        <button onClick={this.clearData}>CLEAR</button>
        <h4>{this.state.data}</h4>
        </>
             );
  }
}
        ReactDOM.render(
        <App />, document.getElementById('mountNode') );

react clear input after button click

<script type="text/babel">
    var StateComponent = React.createClass({
        resetName : function(event){
            this.setState({
                name : ''
            });
        },
        render : function(){
            return (
                <div>
                    <input type="text" value= {this.state.name}/>
                    <button onClick={this.resetName}>Reset</button>
                </div>
            )
        }
    });
    ReactDOM.render(<StateComponent/>, document.getElementById('app'));
</script>