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

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

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