// uncontrolled
handleSubmit = (event) => { e.preventDefault(); e.target.reset();
}
// controlled
handleSubmit = (event) => { event.preventDefault(); console.log(this.state); this.setState({ name: '', email: '', password: '', }); event.target.reset(); };

// Uncontrolled form reset
handleSubmit = (event) => { event.preventDefault(); event.target.reset();
};
<form onSubmit={this.handleSubmit}> ...
</form>
//...........................................................
// Controlled form reset
state = { name: '', password: '', email: '',
};
handleSubmit = (event) => { event.preventDefault(); this.setState({name: '',email: '',password: ''}); event.target.reset();
};
handleChange = (event) => { this.setState({[event.target.name]: event.target.value,});
};
<form onSubmit={this.handleSubmit}> ...
</form>

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

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

<!-- you just need a button type of reset -->
<form> <div> <label for="name">Name</label> <input type="text" id="name" placeholder="name" /> </div> <div> <label for="password">Password</label> <input type="password" id="password" placeholder="password" /> </div> <button type="reset">Reset</button> <button>Submit</button>
</form>