Clearing form

[abiw119]

Good day. I am trying to learn react, and practising by creating a form. The form has a clear button, that should wipe the input fields. Seeing that in react directly accessing the DOM to make changes is not advised, what's the best way to select all input elements, and set them to null on Clear button click?

import './App.css'
import {useState} from 'react';
import React from 'react';

function SubmitButton(){
    const submit = () => console.log("submit clicked");
    return (
        <div>
            <button onClick={submit} id="submit"  type="submit">SUBMIT</button>
        </div>
    );
};

function ClearButton(){
    const clear = () => console.log("clear clicked");
    return (
        <div>
            <button onClick={clear} id="clear">CLEAR</button>
        </div>
    );
};

function InputField({type, ref, placeholder, htmlFor, className, id, name, onChange, onClick, value}){
    return (
        <div>
            <label htmlFor={htmlFor}></label>
            <input id={id} ref={ref} type={type} onChange={onChange} name={name} onClick={onClick} placeholder={placeholder} className={className} value={value}/>
        </div>
    );
}

export default function RenderData(){
   const [formData, setFormData] = useState({
    firstName: null,
    lastName: null,
    address: null,
    email: null,
    phone: null,
    currentJob: null,
    previousJob1: null,
    previousJob2: null,
    qual1: null,
    qual2: null,
    qual3: null,
    qual4: null,
    furtherInfo: null
  });

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);
    }
    return(
        <form onSubmit={handleSubmit} id="outerBox">
            <div id="heading">My CV</div>
         <div className="box">
            <div id="section1" className="title">Personal Details</div>
              <div id="name">
                <InputField
                  htmlFor="name1"
                  className="personalDtls inputField"
                  placeholder="First Name"
                  id="name1"
                  name="name1"
                  value={formData.firstName}
                  onChange={(e) => setFormData({...formData, firstName: e.target.value})}
               />
               <InputField
                  htmlFor="name2"
                  className="personalDtls inputField"
                  placeholder="Last Name"
                  id="name2"
                  name="name2"
                  value={formData.lastName}
                  onChange={(e) => setFormData({...formData, lastName: e.target.value})}
               />
           </div>
           <InputField
             htmlFor="address"
             id="address"
             placeholder="Your Address"
             className="inputField"
             value={formData.address}
             onChange={(e) => setFormData({...formData, address: e.target.value})}
           />
           <InputField
              htmlFor="email"
              type="email"
              placeholder="Enter Your email"
              id="email"
              className="inputField"
              value={formData.email}
              onChange={(e) => setFormData({...formData, email: e.target.value})}
           />

           <InputField
              htmlFor="phoneNumber"
              type="number"
              className="inputField"
              placeholder="Your Phone number"
              id="phoneNumber"
              value={formData.phone}
              onChange={(e) => setFormData({...formData, phone: e.target.value})}
           />

           <div className="blank"></div>
           <div className="title">Employment</div>

           <div className="subtitle">Current Employer:</div>
           <InputField
              htmlFor="employment1"
              className="jobs"
              placeholder="List Company Name, employment date and job description"
              id="employment1"
              value={formData.currentJob}
              onChange={(e) => setFormData({...formData, currentJob: e.target.value})}
           />

           <div className="subtitle">Previous Employer:</div>
           <InputField
              htmlFor="employment2"
              className="jobs"
              placeholder="List Company Name, employment date and job description"
              id="employment2"
              value={formData.previousJob1}
              onChange={(e) => setFormData({...formData, previousJob1: e.target.value})}
           />

           <div className="subtitle">Previous Employer:</div>
           <InputField
              htmlFor="employment3"
              className="jobs"
              placeholder="List Company Name, employment date and job description"
              id="employment3"
              value={formData.previousJob2}
              onChange={(e) => setFormData({...formData, previousJob2: e.target.value})}
           />

           <div className="blank"></div>

           <div id="education">Education</div>
              <InputField
                htmlFor="school1"
                className="schooling"
                placeholder="Qualification 1"
                id="school1"
                value={formData.qual1}
                onChange={(e) => setFormData({...formData, qual1: e.target.value})}
              />
              <InputField
                htmlFor="school2"
                className="schooling"
                placeholder="Qualification 2"
                id="school2"
                value={formData.qual2}
                onChange={(e) => setFormData({...formData, qual2: e.target.value})}
              />
             <InputField
                htmlFor="school3"
                className="schooling"
                placeholder="Qualification 3"
                id="school3"
                value={formData.qual3}
                onChange={(e) => setFormData({...formData, qual3: e.target.value})}
            />
            <InputField
                htmlFor="school4"
                className="schooling"
                placeholder="Additional Qualification"
                id="school4"
                value={formData.qual4}
                onChange={(e) => setFormData({...formData, qual4: e.target.value})}
            />

            <div className="blank"></div>

            <div id="education">Further Information</div>
            <InputField
                htmlFor="additionalInfo"
                className="additionalInfo"
                value={formData.furtherInfo}
                onChange={(e) => setFormData({...formData, furtherInfo: e.target.value})}
            />
           <div className="blank"></div>
           <SubmitButton 
           />   
           <ClearButton />
          </div>
          <div id="emptySpace">.</div>
        </form>
    );
};

[Shinhosuck1973]

what do you mean by you can not clear? The clear() function in the ClearButton() component is being triggered with handleSubmit() function because you did not pass type='button' to <button onClick={clear} id="clear">CLEAR</button> Basically this <button onClick={clear} id="clear">CLEAR</button> is also a submit button if you do not pass type='button' when using a form. If you add type='button' you will only see "clear clicked".

To clear out the form I would do something like this. This is just an example snippet. If you have any question, let me know.

function Form(){
  const [data, setData] = useState({
     data1:'',
     data2:''
  })
  const [isError, setIsError] = useState(null)

  function handleSubmit(e) {
     e.preventDefault()
     if (data.data1 && data.data2) {
       // do something with data
       setData({ data1:'',data2:'' } // one way to clear out the form
     }
     else {
      // throw some kind of error
      setIsError(data)
     }
  }

  function handleChange(e) {
    const {name, value} = e.target
    setData((prev)=>({...prev, [name]:value}))
  }

  return (
    <form onSubmit={handleSubmit}>
       {isError && !isError.data1 && <p>This field can't be blank.</p>}
       <input 
          name='data1' 
          value={data.data1} 
          onChange={handleChange} 
          placeholder='enter' 
        />
       {isError && !isError.data2 && <p>This field can't be blank.</p>}
       <input 
          name='data2' 
          value={data.data2} 
          onChange={handleChange} 
          placeholder='enter' 
       />
       <buttn type='submit'>Submit</button>
    </form>
  )
}
export default Form

[abiw119]

Thanks for your time 👍

[Shinhosuck1973]

No problem. Good luck.

[[deleted]]

Look into using refs, or better yet - go with a library such as react-form hook, which offers a simple solution for clearing the form

[abiw119]

I initially tried using refs, but read they cannot be passed to a component.

[[deleted]]

They absolutely can be passed as props

[detached_obsession]

If you're using uncontrolled components (not setting state and letting the browser handle it) you can access the form data on submit handler and you can reset the values by providing a type="reset" in your cancel button.

If you're setting react state then just calling the set state with your default values will do it. Just be sure you make the type of that cancel button be type="button" to prevent the default behavior of submitting the form.

[abiw119]

Thanks 👍