title: react js: axios post request to node.js api
body: <p><em>Hi,</em> I have some troubles with sending all data in my request using axios. I created node.js api and now I want to send user registration data from my form using axios and react js as my frontend technology. </p>
  
  <p>I updated my state in react after submit and now when I want to send information by 'Content-Type': 'application/x-www-form-urlencoded' my firstName is not send(null) and last value- location get '\"' at the end.</p>
  
  <p>I tested request in postman and it works well.</p>
  
  <p>Any advice?</p>
  
  <p><strong>my node.js route:</strong></p>
  
  <pre><code>app.post('/users', (req, res) =&gt; {
  
        const user = { firstName: req.body.firstName, lastName: req.body.lastName, age: req.body.age, photo: req.body.photo, email: req.body.email, description: req.body.description, hobbies: req.body.hobbies, location: req.body.location };
  
        db.collection('users').insert(user, (err, result) =&gt; {
          if (err) { 
            res.send({ 'error': 'An error has occurred' }); 
          } else {
            res.send(result.ops[0]);
          }
        });
      });
  </code></pre>
  
  <p><strong>react registration:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  
  class Register extends Component {
      state = {
          firstName: '',
          lastName: '',
          age: '',
          email: '',
          description: '',
          hobbies: '',
          location: '',
      };
  
      handleFirstNameChange = event =&gt; {
          this.setState({ 
              firstName: event.target.value,
          });
      }
  
      handleLastNameChange = event =&gt; {
          this.setState({ 
              lastName: event.target.value,
          });
      }
  
      handleEmailChange = event =&gt; {
          this.setState({ 
              email: event.target.value,
          });
      }
  
      handleAgeChange = event =&gt; {
          this.setState({ 
              age: event.target.value,
          });
      }
  
      handleDescriptionChange = event =&gt; {
          this.setState({ 
              description: event.target.value,
          });
      }
  
      handleHobbiesChange = event =&gt; {
          this.setState({ 
              hobbies: event.target.value,
          });
      }
      handleLocationChange = event =&gt; {
          this.setState({ 
              location: event.target.value,
          });
      }
  
      handleSubmit = event =&gt; {
          event.preventDefault();
  
          const user = {
              firstName: this.state.firstName,
              lastName: this.state.lastName,
              age: this.state.age,
              email: this.state.email,
              description: this.state.description,
              hobbies: this.state.hobbies,
              location: this.state.location,
          };
  
          //x-www-form 
          let formBody = [];
          for (let property in user) {
              let encodedKey = encodeURIComponent(property);
              let encodedValue = encodeURIComponent(user[property]);
              formBody.push(encodedKey + "=" + encodedValue);
          }
          formBody = formBody.join("&amp;");
  
          console.log(formBody);
  
          axios.post(`http://localhost:8000/users`, { formBody }, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
            .then(res =&gt; {
              console.log(res);
              console.log(res.data);
          })
      }
  
    render() {
      return (
        &lt;div className="register"&gt;
          &lt;h2&gt;Register&lt;/h2&gt;
  
          &lt;form onSubmit={this.handleSubmit}&gt;
              &lt;label htmlFor="firstName"&gt;First Name:&lt;/label&gt;
              &lt;input type="text" id="firstName" name="firstName" onChange={this.handleFirstNameChange} /&gt;
              &lt;br/&gt;
              &lt;label htmlFor="lastName"&gt;Last Name:&lt;/label&gt;
              &lt;input type="text" id="lastName" name="lastName" onChange={this.handleLastNameChange} /&gt;
              &lt;br/&gt;
              &lt;label htmlFor="email"&gt;Email:&lt;/label&gt;
              &lt;input type="text" id="email" name="email" onChange={this.handleEmailChange} /&gt;
              &lt;br/&gt;
              &lt;label htmlFor="age"&gt;Age:&lt;/label&gt;
              &lt;input type="text" id="age" name="age" onChange={this.handleAgeChange} /&gt;
              &lt;br/&gt;
              &lt;label htmlFor="description"&gt;Description of myself:&lt;/label&gt;
              &lt;input type="text" id="description" name="description" onChange={this.handleDescriptionChange} /&gt;
              &lt;br/&gt;
              &lt;label htmlFor="hobbies"&gt;Hobbies:&lt;/label&gt;
              &lt;input type="text" id="hobbies" name="hobbies" onChange={this.handleHobbiesChange} /&gt;
              &lt;br/&gt;
              &lt;label htmlFor="location"&gt;Location:&lt;/label&gt;
              &lt;input type="text" id="location" name="location" onChange={this.handleLocationChange} /&gt;
              &lt;br/&gt;
              &lt;input type="submit" value="Register" /&gt;
          &lt;/form&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default Register;
  </code></pre>
  
  <p><strong>database result in mLab:</strong></p>
  
  <pre><code>{
      "_id": {
          "$oid": "5b3af97a10d5b622289ddbbc"
      },
      "firstName": null,
      "lastName": "test",
      "age": "222",
      "photo": null,
      "email": "test@gmail.com",
      "description": "test",
      "hobbies": "test",
      "location": "test\"}"
  }
  </code></pre>