How to create form post using React?

Question

User enters his email in the input field and I want to receive

FormData { "email": "test@gmail.com" }

on the server. You can use any server. UPD: I tried to do this

class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

Its not my code, I`m new in react.js. Question is: where I can see my data in that format?

Answer 1

You can use axios to post this data to the server in the format you desire,

var bodyFormData = new FormData();
bodyFormData.set('userName', 'test@gmail.com');
axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    headers: {'Content-Type': 'multipart/form-data' }
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

I would recommend using axios for this, but you can do it using fetch as well, have a look at this answer which explains it very clearly.