title: How to send POST request to Django API from ReactJS web app?
body: <p>I created a very simple Django API. It returns a fixed numeric value (just for testing purpose):</p>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>from django.http import HttpResponse
  
  def index(request):
      return HttpResponse(0)
  </code></pre>
  
  <p>I also have a simple front-end developed using React JS. To develop the backend and front-end, I was using these two tutorials:</p>
  
  <ul>
  <li><p>ReactJS: <a href="https://mherman.org/blog/dockerizing-a-react-app/" rel="noreferrer">https://mherman.org/blog/dockerizing-a-react-app/</a></p></li>
  <li><p>Django Python API: <a href="https://semaphoreci.com/community/tutorials/dockerizing-a-python-django-web-application" rel="noreferrer">https://semaphoreci.com/community/tutorials/dockerizing-a-python-django-web-application</a></p></li>
  </ul>
  
  <p>Now I want to send a POST request to Django API from ReactJS and pass <code>name</code> and <code>email</code> parameters. How can I do it?</p>
  
  <p>This is my App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        fullname: "",
        emailaddress: ""
      };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      const target = event.target;
      const value = target.type === "checkbox" ? target.checked : target.value;
      const name = target.name;
  
      this.setState({
        [name]: value
      });
    }
  
    handleSubmit(event) {
      event.preventDefault();
      console.log(this.state);
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header&gt;
            &lt;div className="container"&gt;
              &lt;nav className="navbar"&gt;
                &lt;div className="navbar-brand"&gt;
                  &lt;span className="navbar-item"&gt;Forms in React&lt;/span&gt;
                &lt;/div&gt;
              &lt;/nav&gt;
            &lt;/div&gt;
          &lt;/header&gt;
          &lt;div className="container"&gt;
            &lt;div className="columns"&gt;
              &lt;div className="column is-9"&gt;
                &lt;form className="form" onSubmit={this.handleSubmit}&gt;
                  &lt;div className="field"&gt;
                    &lt;label className="label"&gt;Name&lt;/label&gt;
                    &lt;div className="control"&gt;
                      &lt;input
                        className="input"
                        type="text"
                        name="fullname"
                        value={this.state.fullname}
                        onChange={this.handleChange}
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className="field"&gt;
                    &lt;label className="label"&gt;Email&lt;/label&gt;
                    &lt;div className="control"&gt;
                      &lt;input
                        className="input"
                        type="email"
                        name="emailaddress"
                        value={this.state.emailaddress}
                        onChange={this.handleChange}
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className="field"&gt;
                    &lt;div className="control"&gt;
                      &lt;input
                        type="submit"
                        value="Submit"
                        className="button is-primary"
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
              &lt;div className="column is-3"&gt;
                &lt;pre&gt;
                  &lt;code&gt;
                    &lt;p&gt;Full Name: {this.state.fullname}&lt;/p&gt;
                    &lt;p&gt;Email Address: {this.state.emailaddress}&lt;/p&gt;
                  &lt;/code&gt;
                &lt;/pre&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>