title: How to Post data to database using Fetch API in React.js
body: <p>I have recently learned how to set up a simple api in my express server using a localhost mySQL database I have running on a MAMP server.  After I set that up I learned how to have React.js fetch that data and display it.  Now I want to do the reverse and post data from a form I created in React.js.  I would like to continue using the fetch API to post that data.  You can view my code below.</p>
  
  <p>Below is my express server code for my api.</p>
  
  <pre><code>  app.get('/api/listitems', (req, res) =&gt; {   
      connection.connect();  
      connection.query('SELECT * from list_items', (err,results,fields) =&gt; {
        res.send(results)
      })
      connection.end();
    });
  </code></pre>
  
  <p>I have already set up the form and created the submit and onchange functions for the form.  When I submit data it is just put in an alert. I would like to have that data posted to the database instead. IBelow is the React App.js code.</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.scss';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        items: [],
        formvalue: ''
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleData = () =&gt; {
      fetch('http://localhost:5000/api/listitems')
      .then(response =&gt; response.json())
      .then(data =&gt; this.setState({ items: data }));
    }
  
    handleChange(event) {
      this.setState({formvalue: event.target.value});
    }
  
    handleSubmit(event) {
      alert('A list was submitted: ' + this.state.formvalue);
      event.preventDefault();
    }
  
    componentDidMount() {
      this.handleData();
    }
  
    render() {
      var formStyle = {
        marginTop: '20px'
      };
      return (
        &lt;div className="App"&gt;
            &lt;h1&gt;Submit an Item&lt;/h1&gt;
            &lt;form onSubmit={this.handleSubmit} style={formStyle}&gt;
              &lt;label&gt;
                List Item:
                &lt;input type="text" value={this.state.formvalue} onChange={this.handleChange} /&gt;
              &lt;/label&gt;
              &lt;input type="submit" value="Submit" /&gt;
            &lt;/form&gt;
            &lt;h1&gt;Grocery List&lt;/h1&gt;
            {this.state.items.map(
              (item, i) =&gt; 
                &lt;p key={i}&gt;{item.List_Group}: {item.Content}&lt;/p&gt;
              )}
          &lt;div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>