title: POST 400 Bad request, React, Node/Express, MongoDB
body: <p>I'm learning to build a simple MERN application to take user data and upload it to a mongoDB collection, and I can't seem to figure out why I'm receiving a 400 BAD REQUEST error when attempting to post the user data. It's currently being run on local server. I'm currently unable to find a post that directly solves my particular issue.</p>
  
  <p>Here is my data.js for the data schema:</p>
  
  <pre><code>const mongoose = require("mongoose");
  const Schema = mongoose.Schema;
  
  const data = new Schema(
      {
          x: Number,
          y: Number,
          z: Number,
          r: Number,
          g: Number,
          b: Number
      },
      { collection: "cube" }
  );
  
  module.exports = mongoose.model("data", DataSchema);
  </code></pre>
  
  <p>My server.js backend:</p>
  
  <pre><code>// JavaScript source code
  const mongoose = require("mongoose");
  const express = require("express");
  const bodyParser = require("body-parser");
  const logger = require("morgan");
  const Data = require("./data");
  const cors = require("cors");
  
  const API_PORT = 3000;
  const app = express();
  const router = express.Router();
  
  //MongoDB database
  const dbRoute = "mongodb+srv://testuser:testuserpw@alexcluster-alfjn.mongodb.net/test?retryWrites=true";
  
  mongoose.connect(
      dbRoute,  
      { useNewUrlParser:true }
  );
  
  let db = mongoose.connection;
  
  db.once("open", () =&gt; console.log("Connected to database"));
  
  db.on("error", console.error.bind(console, "MongoDB connection error:"));
  
  // bodyParser, parses the request body to be a readable json format
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(bodyParser.json());
  app.use(logger("dev"));
  
  //this is our add method
  //add method to add data into database
  router.post ("/putData", (req, res) =&gt; {
      let data = new Data(req.body);
  
      data.save()
      .then(data =&gt; {
          res.json('Values added successfully');
      })
      .catch(err =&gt; {
          res.status(400).send("unable to save to database");
      });
  });
  
  app.use("/api", router);
  app.use(express.json());
  
  app.listen(API_PORT, () =&gt; console.log('Listening on port ${API_PORT}'));
  </code></pre>
  
  <p>And finally my App.js frontend:</p>
  
  <pre><code>import React, { Component } from "react";
  import axios from "axios";
  
  class App extends Component {
      state = {
          x: 0,
          y: 0,
          z: 0,
          r: 0,
          g: 0,
          b: 0
      };
  
      addData = (xVal, yVal, zVal, rVal, gVal, bVal) =&gt; {
          axios.post("http://localhost:3000/api/putData", {
              x: xVal,
              y: yVal,
              z: zVal,
              r: rVal,
              g: gVal,
              b: bVal
          })
          .then(response =&gt; { 
              console.log(response)
          })
          .catch(error =&gt; {
              console.log(error.response)
          });
  // reset state
          // this.setState({
          //     x: 0,
          //     y: 0,
          //     z: 0,
          //     r: 0,
          //     g: 0,
          //     b: 0
          // })
  
      };
  
  //UI
      render(){
          return (
              &lt;div&gt;  
                  &lt;ul&gt;
                      &lt;p&gt; Please enter all applicables values for x, y, z, and r, g, b. &lt;/p&gt;
                  &lt;/ul&gt;
                  &lt;div&gt;
                      &lt;label&gt; X &lt;/label&gt;
                      &lt;input type="number" min="0" max="360" onChange={e =&gt; this.setState({x: e.target.value})} placeholder="0" style={{width:"40px"}} /&gt;
                      &lt;label&gt; Y &lt;/label&gt;
                      &lt;input type="number" min="0" max="360" onChange={e =&gt; this.setState({y: e.target.value})} placeholder="0" style={{width:"40px"}} /&gt;
                      &lt;label&gt; Z &lt;/label&gt;
                      &lt;input type="number" min="0" max="360" onChange={e =&gt; this.setState({z: e.target.value})} placeholder="0" style={{width:"40px"}} /&gt;
                      &lt;label&gt; R &lt;/label&gt;
                      &lt;input type="number" min="0" max="255" onChange={e =&gt; this.setState({r: e.target.value})} placeholder="0" style={{width:"40px"}} /&gt;
                      &lt;label&gt; G &lt;/label&gt;
                      &lt;input type="number" min="0" max="255" onChange={e =&gt; this.setState({g: e.target.value})} placeholder="0" style={{width:"40px"}} /&gt;
                      &lt;label&gt; B &lt;/label&gt;
                      &lt;input type="number" min="0" max="255" onChange={e =&gt; this.setState({b: e.target.value})} placeholder="0" style={{width:"40px"}} /&gt;
                      &lt;button onClick={() =&gt; this.addData(this.state.x, this.state.y, this.state.z, this.state.r, this.state.g, this.state.b)}&gt;
                      Add
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>According to the console in Google Chrome, this is where I receive the error:</p>
  
  <p><a href="https://i.stack.imgur.com/kUAog.png" rel="nofollow noreferrer">![Full error message</a></p>
  
  <p>I'm currently unsure why I'm receiving this error, where the culprit lies and what I can do to fix it. </p>
  
  <p>EDIT1: Edited with the error message.</p>