title: React: use axios to post state to MongoDB
body: <p>I am trying to post the states as data to MongoDB through Express and Node with Axios. </p>
  
  <pre><code>class App extends React.Component {
    constructor(props){
      super(props)
  
      this.state={
        items: [{
            desc:"Manage",
            price: 5000,
            purchased: false,
          },
          {
            desc:"Deliver",
            price: 2000,
            purchased: false,
          },
          {
            desc:"Market",
            price: 4000,
            purchased: false,
          }
        ],
        data:null,
        DisabledButton: true
      }
    }
  
    getAddedItems(){
      return this.state.items.filter(item =&gt; item.purchased)
    }
  
    componentDidMount() {
      this.callApi()
        .then(res =&gt; this.setState({ data: res[0].name}))
        .catch(err =&gt; console.log(err));
    }
  
    callApi = async () =&gt; {
      const response = await fetch('/test');
      const body = await response.json();
      console.log("body is" + body)
      if (response.status !== 200) throw Error(body.message);
  
      return body;
    };
  
    handleClick(desc){
      const newItems = this.state.items.slice()
      this.printItems(newItems)
      for(var item of newItems){
        if(item.desc === desc){
          item.purchased = !item.purchased
        }
      }
      this.printItems(newItems)
  
      this.setState({
        items: newItems
      })
    }
  
    printItems(items){
      console.log(items[0].purchased + "  " + items[1].purchased + " " + items[2].purchased)
    }
  
    handleSubmit(e){
      e.preventDefault();
      const added = this.getAddedItems()
  
      axios.post('/add', added)
        .then(res =&gt; console.log(res))
        .catch(err =&gt; console.log(err));
    }
  
    render()  {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;Welcome to Shopping Center&lt;/h1&gt;
          &lt;/header&gt;
        &lt;div&gt;
          &lt;div&gt;
            {this.state.data}
          &lt;/div&gt;
          &lt;Service url={Product1} desc="Manage" alt="MA" purchased={this.state.items[0].purchased} thisClick={ (desc) =&gt; this.handleClick("Manage")} /&gt;
          &lt;Service url={Product2} desc="Deliver" alt="DE" purchased={this.state.items[1].purchased} thisClick={ (desc) =&gt; this.handleClick("Deliver")}/&gt;
          &lt;Service url={Product3} desc="Market" alt="MR" purchased={this.state.items[2].purchased} thisClick={ (desc) =&gt; this.handleClick("Market")}/&gt;
        &lt;/div&gt;
        &lt;button type="button" className="btn btn-primary" onClick={(e) =&gt; this.handleSubmit(e)}&gt;
                      Added to Cart
        &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The <code>getAddedItems()</code> returns all the <code>items</code> whose <code>purchased</code> is <code>true</code> in the state.</p>
  
  <p>In my <code>handleSubmit(e)</code> function, i used <code>axios</code> to make a <code>post</code> request with url <code>"/add"</code></p>
  
  <p>In my server.js, i have the following code handeling the post request:</p>
  
  <pre><code>//Get a Post route
  app.get('/add', (req, res) =&gt; {
    console.log(req.query)
    /*for (let item of req.query){
      console.log(item.desc)
      console.log(item.price)
    }*/
    /*MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
      if (err) throw err;
      var dbo = db.db("cart");
      var objs = req;
      dbo.collection("items").insertMany(objs, function(err, result) {
        if (err) throw err;
        console.log("Number of documents inserted: " + result.insertedCount);
        db.close()
      });
    });*/
  });
  </code></pre>
  
  <p>I am currently debugging it, so I am comment out majority of the code in my server.js</p>
  
  <p>Th <code>req.query</code> should have received the data i send from react, but when I do req.query, it is empty</p>
  
  <p>Where did i do wrong?</p>