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?

There are a lot of tuto about it... You're question is too broad. Share what you tried... — BENARD Patrick, May 19 '20 at 14:34
There are dozen of example on this subject anyway this is one of them: https://developer.okta.com/blog/2018/07/19/simple-crud-react-and-spring-boot — Hussein Akar, May 19 '20 at 14:42
Does this answer your question? [How to send form data with react](https://stackoverflow.com/questions/51346619/how-to-send-form-data-with-react) — BENARD Patrick, May 19 '20 at 14:50
You would need to look on the server to see the data posted... Or in the network tab of your browser's developer tools. — Heretic Monkey, May 19 '20 at 14:57

score 0 · Answer 1 · answered May 19 '20 at 14:50

0

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.

answered May 19 '20 at 14:50

Dexter

236
2
12

Thank you! What server can you suggest? Can I use json placeholder? – Alina Homyakova May 19 '20 at 15:02
What is the usecase, if you can tell me then I can suggest you the server? – Dexter May 19 '20 at 15:27
user sends email for subscription – Alina Homyakova May 19 '20 at 17:45
Json placeholder(`https://jsonplaceholder.typicode.com/`) can be used for fake data to test if your call is going through, you have to use a real backend if you want it to work. Hope this answers! – Dexter May 19 '20 at 20:23

How to create form post using React?

1 Answers1