clear controlled components in a form using react after clicking submit button

Question

I have created a form to enter name, email, website and message. After entering the details using submit button I want to reset all the fields. I don't know how to use control component. Please help.. This is how I enter Input fields.

export default ({
noLabels = false,
margin = "",
small = false,
blueButton = false,
buttonLabel = null,
quickContact = false,
subject = "New message from website",
}) => {
 const [name, setName] = useState(
process.env.NODE_ENV === "development" ? "abc" : ""
)
const [email, setEmail] = useState(
process.env.NODE_ENV === "development" ? "[email protected]" : ""
)
const [phone, setPhone] = useState(
  process.env.NODE_ENV === "development" ? "Phone" : ""
)
const [country, setCountry] = useState(
  process.env.NODE_ENV === "development" ? "Country" : ""
)
const [message, setMessage] = useState(
 process.env.NODE_ENV === "development" ? "Message" : ""
)
const [website, setWebsite] = useState(
  process.env.NODE_ENV === "development" ? "abc.io" : ""
)

const handleSubmit = e => {
  e.preventDefault()

var formData = new FormData()
formData.set("name", name)
formData.set("email", email)
formData.set("phone", phone)
formData.set("country", country)
formData.set("message", message)
formData.set("website", website)
formData.set("subject", subject)

api
  .contact(formData)
  .then(res => {
    if (typeof window !== "undefined") {
      const uikit = require("uikit")
      uikit
        .toggle(
          document.getElementById(
            quickContact
              ? "form_success_message_quick"
              : "form_success_message"
          )
        )
        .toggle()
    }
  })
  .catch(error => {
    if (typeof window !== "undefined") {
      const uikit = require("uikit")
      uikit
        .toggle(
          document.getElementById(
            quickContact ? "form_error_message_quick" : 
                    "form_error_message"
          )
        )
        .toggle()
    }
  })
 }

 return (
  <form
  action="/send-mail.php"
  className="uk-form contact_form"
  method="post"
  onSubmit={handleSubmit}
   >
     <div
       className="uk-alert-primary contact-form-success-quick"
     data-uk-alert
     id={
       quickContact ? "form_success_message_quick" : 
              "form_success_message"
    }
    hidden
     >
      <a className="uk-alert-close" data-uk-close></a>
      <p>
        Thank you for contacting us. We will get in touch with you 
         shortly.
    </p>
  </div>

     <div
    className="uk-alert-primary contact-form-error-quick"
    data-uk-alert
    id={quickContact ? "form_error_message_quick" : "form_error_message"}
    hidden>
    <a className="uk-alert-close" data-uk-close></a>
    <p>
      Thank you for contacting us. We will get in touch with you shortly.
    </p>
    </div>
    <div
    className={`uk-grid ${
      small || quickContact ? "uk-grid-small" : "uk-grid-medium"
    }`}
    >
      <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
      <InputField
        label="Name *"
        value={name}
        setValue={setName}
        noLabels={noLabels}
        margin={margin}
        small={small}
      />
    </div>

    <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
      <InputField
        label="Email *"
        value={email}
        setValue={setEmail}
        noLabels={noLabels}
        margin={margin}
        small={small}
      />
    </div>

    {quickContact && (
      <div className="uk-width-1-3@s">
        <InputField
          label="Website"
          value={website}
          setValue={setWebsite}
          noLabels={noLabels}
          margin={margin}
          small={small}
        />
      </div>
    )}

    {!quickContact && (
      <div className="uk-width-1-2@s">
        <InputField
          label="Phone number *"
          value={phone}
          setValue={setPhone}
          noLabels={noLabels}
          margin={margin}
          small={small}
        />
      </div>
    )}

    {!quickContact && (
      <div className="uk-width-1-2@s">
        <InputField
          label="Website"
          value={website}
          setValue={setWebsite}
          noLabels={noLabels}
          margin={margin}
          small={small}
        />
      </div>
    )}

    <div className="uk-width-1-1">
      <InputField
        label="Message *"
        value={message}
        setValue={setMessage}
        textArea
        noLabels={noLabels}
        margin={margin}
        small={small}
      />
    </div>

    <div className="uk-width-1-1 uk-text-center">
      <button
        type="submit"
        className={`uk-button ${blueButton ? "blue" : "purple"}`}
        value="Submit"
        name="submit"
      >
        {buttonLabel ? buttonLabel : "Submit"}
      </button>
    </div>
  </div>
</form>
)
  }

const InputField = ({
noLabels,
value,
setValue,
label,
 textArea = false,
 margin,
 small,
  }) => {
  <>
  {textArea ? (
    <textarea
      placeholder={label}
      className={`uk-textarea custom-margin-${
        margin ? margin + "-" : ""
      }bottom ${!small && "uk-form-large"}`}
      cols="30"
      rows="6"
      required
      value={value}
      onChange={e => setValue(e.target.value)}
    ></textarea>
    ) : (
    <input
      type="text"
      className={`uk-input custom-margin-${
        margin ? margin + "-" : ""
      }bottom ${!small && "uk-form-large"}`}
      placeholder={label}
      required
      value={value}
      onChange={e => setValue(e.target.value)}
    />
   )}
 </>     

I want to reset this code using "e.target.reset()" if possible. Also the method how to use "setValue" would be great help.

Answer 1

1. Use a single useState hook to hold the values for the form to make it easier to set them all in a single call.
2. Don't manipulate the DOM directly—instead use state + React to declare the desired output given the current state.
3. Refactor multiple conditionals that are addressing the same concern into a single conditional (re: process.env.NODE_ENV)
4. Pass a callback to the state setter to modify the existing props rather than having to explicitly write the function to modify each input's value manually.

const devValues = {
  name: "abc",
  email: "[email protected]",
  phone: "Phone",
  country: "Country",
  message: "Message",
  website: "abc.io",
}

const defaultValues = {
  name: "",
  email: "",
  phone: "",
  country: "",
  message: "",
  website: "",
}

export default ({
  noLabels = false,
  margin = "",
  small = false,
  blueButton = false,
  buttonLabel = null,
  quickContact = false,
  subject = "New message from website",
}) => {
  const [message, setMessage] = useState(null)
  const [inputValues, setInputValues] = useState(
    process.env.NODE_ENV === "development" ? devValues : defaultValues
  )

  const handleSubmit = (e) => {
    e.preventDefault()

    var formData = new FormData()
    Object.entries(inputValues).forEach(([key, value]) => {
      formData.set(key, value)
    })

    api
      .contact(formData)
      .then((res) => {
        setMessage(
          quickContact ? "form_success_message_quick" : "form_success_message"
        )

        // clear the input values here
        setInputValues(defaultValues)
      })
      .catch((error) => {
        setMessage(
          quickContact ? "form_error_message_quick" : "form_error_message"
        )
      })
  }

  return (
    <form
      action="/send-mail.php"
      className="uk-form contact_form"
      method="post"
      onSubmit={handleSubmit}
    >
      {message && (
        <div
          className={
            message.startsWith("form_success_message")
              ? "uk-alert-primary contact-form-success-quick"
              : "uk-alert-primary contact-form-error-quick"
          }
          data-uk-alert
        >
          <a className="uk-alert-close" data-uk-close></a>
          <p>
            Thank you for contacting us. We will get in touch with you shortly.
          </p>
        </div>
      )}

      <div
        className={`uk-grid ${
          small || quickContact ? "uk-grid-small" : "uk-grid-medium"
        }`}
      >
        <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
          <InputField
            label="Name *"
            name="name"
            value={inputValues.name}
            setValue={setInputValues}
            noLabels={noLabels}
            margin={margin}
            small={small}
          />
        </div>

        <div className={quickContact ? "uk-width-1-3@s" : "uk-width-1-2@s"}>
          <InputField
            label="Email *"
            name="email"
            value={inputValues.email}
            setValue={setInputValues}
            noLabels={noLabels}
            margin={margin}
            small={small}
          />
        </div>

        {quickContact && (
          <div className="uk-width-1-3@s">
            <InputField
              label="Website"
              name="website"
              value={inputValues.website}
              setValue={setInputValues}
              noLabels={noLabels}
              margin={margin}
              small={small}
            />
          </div>
        )}

        {!quickContact && (
          <div className="uk-width-1-2@s">
            <InputField
              label="Phone number *"
              name="phone"
              value={inputValues.phone}
              setValue={setInputValues}
              noLabels={noLabels}
              margin={margin}
              small={small}
            />
          </div>
        )}

        {!quickContact && (
          <div className="uk-width-1-2@s">
            <InputField
              label="Website"
              name="website"
              value={inputValues.website}
              setValue={setInputValues}
              noLabels={noLabels}
              margin={margin}
              small={small}
            />
          </div>
        )}

        <div className="uk-width-1-1">
          <InputField
            label="Message *"
            name="message"
            value={inputValues.message}
            setValue={setInputValues}
            textArea
            noLabels={noLabels}
            margin={margin}
            small={small}
          />
        </div>

        <div className="uk-width-1-1 uk-text-center">
          <button
            type="submit"
            className={`uk-button ${blueButton ? "blue" : "purple"}`}
            value="Submit"
            name="submit"
          >
            {buttonLabel ? buttonLabel : "Submit"}
          </button>
        </div>
      </div>
    </form>
  )
}

const InputField = ({
  name,
  value,
  setValue,
  label,
  textArea = false,
  margin,
  small,
}) => {
  const onChange = (e) => {
    const value = e.target.value
    setValue((prev) => ({ ...prev, [name]: value }))
  }

  return textArea ? (
    <textarea
      placeholder={label}
      className={`uk-textarea custom-margin-${
        margin ? margin + "-" : ""
      }bottom ${!small && "uk-form-large"}`}
      cols="30"
      rows="6"
      required
      value={value}
      onChange={onChange}
    />
  ) : (
    <input
      type="text"
      className={`uk-input custom-margin-${margin ? margin + "-" : ""}bottom ${
        !small && "uk-form-large"
      }`}
      placeholder={label}
      required
      value={value}
      onChange={onChange}
    />
  )
}

Answer 2

Among the correct answer and especially the recommendations of @coreyward I want to add another approach that may help you or other users in the same trouble.

You can also use a useRef hook and ref, to your form tag and simply clear it with the native reset() function:

    export default ({
      noLabels = false,
      margin = "",
      small = false,
      blueButton = false,
      buttonLabel = null,
      quickContact = false,
      subject = "New message from website",
    }) => {
      const mailForm = useRef(null)
      //... more code
    }
  return (
    <form
      action="/send-mail.php"
      className="uk-form contact_form"
      method="post"
      onSubmit={handleSubmit}
      ref={mailForm}
    >
  )

Then, in your submit function you have exposed a mailForm.current as your form. You can simply:

const handleSubmit = (e) => {
    e.preventDefault()

    var formData = new FormData()
    Object.entries(inputValues).forEach(([key, value]) => {
      formData.set(key, value)
    })

    api
      .contact(formData)
      .then((res) => {
        setMessage(
          quickContact ? "form_success_message_quick" : "form_success_message"
        )

        // clear the input values here
        mailForm.curent.reset();
      })
      .catch((error) => {
        setMessage(
          quickContact ? "form_error_message_quick" : "form_error_message"
        )
      })
  }