JAVASCRIPT

clear input file html react

e.target.value = null;

reset input react

const App = () => {
  const [message, setMessage] = useState('');
  return (
    <div>
      <input
        type="text"
        value={message}
		onChange={(event) => {
          setMessage(event.target.value);
        }}/>

      <button 
		onClick={() => {
          alert('check')
          // clear input value
          setMessage('');
        }}>
          Clear field
      </button>
    </div>
  );
};

reset form input react

cancelCourse = () => { 
  document.getElementById("create-course-form").reset();
}

render() {
  return (
    <form id="create-course-form">
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

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') );