Clear all fields after submit React js

Question

I have the following code in my react app and I need to have empty input areas after submitting. Please assist me.

import { useRef } from 'react';

import './Contact.css'; import emailjs from 'emailjs-com' import { useState, useEffect } from 'react';

const Contact = () => {

const formRef = useRef();
const [done, setDone] = useState(false);

const handleSubmit = (e) => {

    e.preventDefault();
    emailjs.sendForm(
        'service_py6v3mm',
        'template_db5q8nx',
        formRef.current,
        'mJDC1if10C25Z-TZC'
    )
        .then((result) => {
            console.log(result.text);
            setDone(true);
        }, (error) => {
            console.log(error.text);
        });

}


return (
    <div className="c">

        <div className='c-wrapper'>
            <div className='c-left'>
                <h1 className='c-title'> Let's discuss!</h1>
                <div className='c-info'>
                    <div className='c-info-item'>
                        <div className="c-info-item">
                            <img
                                src="./images/Phone.jpg"
                                alt=""
                                className="c-icon"
                            />
                            +12345678                        </div>


                        <div className="c-info-item">
                            <img className='c-icon'
                                src="./images/Email.png" alt='Email' />

                            [email protected]
                        </div>

                        <div className="c-info-item">
                            <img className='c-icon'
                                src="./images/Location.jpeg"
                                alt=" " />
                            Addis Ababa, Wolo Sefer, Ethio-China Road, Ethiopia
                        </div>
                    </div>
                </div>
            </div>
            <div className='c-right'>
                <p className='c-desc'> <b> Get in touch!</b>
                </p>
                <form ref={formRef} onSubmit={handleSubmit}>
                    <input type='text' placeholder='Name' name='username' />
                    <input type='text' placeholder='Subject' name='user_subject' />
                    <input type='text' placeholder='Your email here... ' name='user_email' />
                    <textarea rows={5} placeholder='message' name='message' /> <br />
                    <button>Submit</button>
                    {done && <p> Thank you   I will contact you soon!</p>}
                </form>
            </div>
        </div>
    </div>

)

} export default Contact

okatarismet okatarismet · Accepted Answer · 2022-03-24T10:37:51

You can bind every input value to a state and empty them when you submit it. Here I add an example for the username. You can multiply it and use it.

  const [username, setUsername] = useState('Name');
  const submitFunctionWhichDeletes = () => {
       console.log(username);
       setUsername('');
  }
  <input ... value={username} onChange={e => setUsername(e.target.value)} ... />

Clear all fields after submit React js

1 Answers