How to send form data using React

React is a javascript library for building user interfaces, in this tutorial we are going to craft an form and handle it using react.

React

We are going to use create-react-app for our demo. It's pretty easy to create an react app with this cli.

$ npx create-react-app react-example
$ cd react-example
$ npm start

Let's install axios too, we will cover up this later.

# Yarn
$ yarn add axios

# npm
$ npm install axios --save

Filetree:

├── README.md
├── node_modules
├── package.json
└── public
	├── favicon.ico 
	├── index.html
	└── manifest.json
└── src
	├── App.css
	├── App.js
	├── App.test.js
	├── index.css
	├── index.js
	├── logo.svg
	└── registerServiceWorker.js

Let's change our App.js to Form.js, and other relevant files:

├── README.md
├── node_modules
├── package.json
└── public
	├── favicon.ico 
	├── index.html
	└── manifest.json
└── src
	├── Form.css
	├── Form.js
	├── Form.test.js
	├── index.css
	├── index.js
	├── logo.svg
	└── registerServiceWorker.js

Open our Form.js and add our first component:

import React from "react";

class Form extends React.Component {
  render() {
    return (
      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} />
        
        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields}></textarea>

        <button type="submit">Send</button>
      </form>
    );
  }
}

export default Form;

Then change our index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Form from './Form'; //
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Form />, document.getElementById('root'));
registerServiceWorker();

It renders perfectly

It's time to add some code to handle our fields

import React from "react";

class Form extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }

  handleFields = e => this.setState({ [e.target.name]: e.target.value });

  render() {
    return (
      <form>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} />
        
        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields}></textarea>

        <button type="submit">Send</button>
      </form>
    );
  }
}

export default Form;

Now we have access to our fields, it's time to send request to formcarry, first import the Axios then submit our form.

import React from "react";
import axios from "axios"; // For making client request.


class Form extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }
  
  handleForm = e => {
    axios.post(
      "https://formcarry.com/s/yourFormId", 
      this.state, 
      {headers: {"Accept": "application/json"}}
      )
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    e.preventDefault();
  }

  handleFields = e => this.setState({ [e.target.name]: e.target.value });

  render() {
    return (
      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} />
        
        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields}></textarea>

        <button type="submit">Send</button>
      </form>
    );
  }
}

export default Form;

We have successfully crafted a working form in React 🍹