There is a value on frontend but no value is sent via form

So I had this working react-select before I changed my style.scss. After a few styling adjustments, it suddenly didn’t work anymore. Well at the frontend everything seems to work. Value is put in and even the props of the component are the same as my old code. But when I send the form data to my google spreadsheet, no value is sent. The rest of the data like email and name just works fine.

Top is what it should look like and bottom the current issue

proof that the value is on the frontend (same output as in my old code)

This is my code:

<Select
    placeholder="Wähle deine Kategorien"
    name="tags"
    className="basic-multi-select"
    isMulti
    options={allTagsSelect}
    theme={(theme) => ({
    ...theme,
    borderRadius: 4,
    colors: {
      ...theme.colors,
      primary25: '#19F8E5',
      primary: '#19F8E5',
      neutral0: '#282828',
      neutral20: '#4e4e4e'
      }
    })}
  required
  delimiter=" | "/>

  // sending form code if this helps you (same as the old code but with `setLoading`, this is just used for a loading container):
  useEffect(() => {
    const scriptURL = 'https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXX' +
        'XXXXXXXXXXXXXXXXXXXXX/exec'
    const form = document.forms['submit-to-google-sheet']

    loadCaptchaEnginge(4, '#222', 'white', 'numbers');

    form.addEventListener('submit', e => {
      setLoading(true);
      e.preventDefault();
      if (validateCaptcha(refCaptcha.current.value) === true) {
        fetch(scriptURL, {
          method: 'POST',
          body: new FormData(form)
        }).then(() => {
          setLoading(false);
          setSent(true);
        }).catch(error => console.error('Error!', error.message));
      } else {
        setLoading(false);
        toast.error('Captcha war nicht richtig.', {
          position: "bottom-center",
          autoClose: 5000,
          hideProgressBar: true,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: false,
          progress: undefined
        });
      }
    })
  }, [])

[AdamHasma]

I keep forgetting that the entries iterator is different than an array. Here’s how to loop through the FormData.

    const body = new FormData(e.currentTarget);
    for (const entry of body.entries()) {
      console.log(`${entry[0]}: ${entry[1]}`);
    }

I updated the codesandbox here to reflect this.

Perhaps in the useEffect hook you want to lead with e.preventDefault before changing state or instead of adding an eventListener directly to the DOM item, try adding the onSubmit event directly to your animated.form.

The one clue I see is when the form is rejected by the captcha, the Select’s value is being cleared. I’m not entirely sure what’s causing this, but it does seem that something is clearing it via the validation or causing it to re-render.

In either case, it doesn’t seem to be related to a react-select issue.

It works! Thank you so much. I did what you suggested.

[ebonow]

I keep forgetting that the entries iterator is different than an array. Here’s how to loop through the FormData.

    const body = new FormData(e.currentTarget);
    for (const entry of body.entries()) {
      console.log(`${entry[0]}: ${entry[1]}`);
    }

I updated the codesandbox here to reflect this.

Perhaps in the useEffect hook you want to lead with e.preventDefault before changing state or instead of adding an eventListener directly to the DOM item, try adding the onSubmit event directly to your animated.form.

The one clue I see is when the form is rejected by the captcha, the Select’s value is being cleared. I’m not entirely sure what’s causing this, but it does seem that something is clearing it via the validation or causing it to re-render.

In either case, it doesn’t seem to be related to a react-select issue.