React onSubmit returning empty data

Question

I want to create a simple form using react. So I though I go with the onSubmit function of the form element, but as it turns out I don't get the form data. data of my handleSubmit function is empty. Why is that?

There is a fiddle that works: https://jsfiddle.net/everdimension/5ry2wdaa/ I don't see the difference.

export default function App() {
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = new FormData(e.target);
    console.log('do the submitting', data)
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <label>
          Media Plan
          <input type="text" name="media-plan" placeholder="Media Plan" required />
        </label>

        <fieldset>
          <legend>Time span selection</legend>
          <label>
            Start date
            <input type="date" name="start-date" required />
          </label>

          <label>
            End date
            <input type="date" name="end-date" required />
          </label>
        </fieldset>

        <fieldset id="submit">
          <legend>Send options</legend>
          <button type="submit" name="copy">
            Copy plan
          </button>
          <button type="submit" name="save">
            Save plan
          </button>
        </fieldset>
      </form>
    </div>
  )
}

Works for me as well, make sure you filled in all the fields and rendered the component properly. — Clarity, Jun 17 '21 at 07:55
You're talking about my code or the fiddle? the fiddle works, my code doesn't. — pgalle, Jun 17 '21 at 07:57
Does this answer your question? [How to inspect FormData?](https://stackoverflow.com/questions/17066875/how-to-inspect-formdata) — Quentin, Jun 17 '21 at 12:39

score 0 · Answer 1 · answered Jun 17 '21 at 12:37

0

I had to read them this way, the formData object only appears empty.

const formData = new FormData(e.target)

for (var value of formData.values()) {
  console.log(value);
}

answered Jun 17 '21 at 12:37

pgalle

216
3
13

React onSubmit returning empty data

1 Answers1