function Form() { return ( <form> <label> Name: <input type="text" /> </label> <button type="submit">Submit</button> <button type="button">Reset</button> </form> ); } export default Form; function Form() { const [inputValue, setInputValue] = useState(''); const handleChange = (event) => { setInputValue(event.target.value); }; return ( <form> <label> Name: <input type="text" value={inputValue} onChange={handleChange} /> </label> <button type="submit">Submit</button> <button type="button">Reset</button> </form> ); } export default Form; // NOW ADDING FORM SUBMISSION BUTTON HANDLER AND RESET BUTTON HANDLER function Form() { const [inputValue, setInputValue] = useState(''); const handleChange = (event) => { setInputValue(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); console.log(inputValue); }; const handleReset = () => { setInputValue(""); }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={inputValue} onChange={handleChange} /> </label> <button type="submit">Submit</button> <button onClick={handleReset} type="button">Reset</button> </form> ); } export default Form;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter