title: How to send form data from React to express
body: <p>i'm fairly new in React. I'm trying to send register data to my backend from a from submit. I've tried the traditional method like setting post method and route in the form but that doesn't seem to work. Is there a way to send the data to back end then receive that data on the front end?</p>
  
  <p>back end route: route is localhost:4000/api/users/register</p>
  
  <pre><code>router.post("/register", (req, res) =&gt; {
      console.log(req.body)
      console.log('Hit')
  
        knex.select('*')
        .from('users')
        .where('email', req.body.email)
        .then(function(results) {          
              knex('users')
              .insert([{
                first_name: req.body.first_name,
                last_name: req.body.last_name,
                phone: req.body.phone,
                email: req.body.email,
                password: bcrypt.hashSync(req.body.password, 15)
              }])
              .returning('id')
              .then(function(id) {
                req.session.user_id = id;
              })
              .catch(function(error) {
                console.error(error)
              });
            }
        })
        .catch(function(error) {
          console.error(error)
        });
      // }
    });
  </code></pre>
  
  <p>React form code:</p>
  
  <pre><code>class Register extends Component {
    constructor(props) {
      super(props)
      this.state = {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        phone: ''
      }
    }
  
    onChange = (e) =&gt; {
      this.setState({ [e.target.name]: e.target.value });
    }
  
    onSubmit = (e) =&gt; {
      e.preventDefault();
      // get form data out of state
      const { first_name, last_name, password, email, phone } = this.state;
  
      fetch('http://localhost:4000/api/users/register' , {
        method: "POST",
        headers: {
          'Content-type': 'application/json'
        }
        .then((result) =&gt; {
          console.log(result)
        })
    })
  }
        render() {
          const { classes } = this.props;
          const { first_name, last_name, password, email, phone } = this.state;
          return (
            &lt;div className="session"&gt;
            &lt;h1&gt;Create your Account&lt;/h1&gt;
              &lt;div className="register-form"&gt;
                &lt;form method='POST' action='http://localhost:4000/api/users/register'&gt;
                  &lt;TextField label="First Name" name="first_name" /&gt;
                  &lt;br/&gt;
                  &lt;TextField label="Last Name" name="last_name" /&gt;
                  &lt;br/&gt;
                  &lt;TextField label="Email" name="email" /&gt;
                  &lt;br/&gt;
                  &lt;TextField label="Password" name="password" /&gt;
                  &lt;br/&gt;    
                  &lt;TextField label="Phone #" name="phone" /&gt;
                  &lt;Button type='Submit' variant="contained" color="primary"&gt;
                    Register
                  &lt;/Button&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      }
  
      export default Register;
  </code></pre>