title: Get data from react form to express.js
body: <p>I'm trying to send some data from a React form to Express.js using POST, I've got some axios code in my React code but not sure I need it. </p>
  
  <p>Right now I'm just trying to console log the data from the form in Express.js but I'm getting the error</p>
  
  <pre><code>[0] ReferenceError: request is not defined
  </code></pre>
  
  <p>My server.js file (Express.js)</p>
  
  <pre><code>const express = require("express");
  const bodyParser = require("body-parser");
  
  const app = express();
  const port = process.env.PORT || 5000;
  
  app.use(
    bodyParser.urlencoded({
      extended: true
    })
  );
  
  app.use(bodyParser.json());
  app.post("/api/formdata", function(req, res) {
    var name = request.body.name;
    var whitdrawal = request.body.whitdrawal;
    var reason = request.body.reason;
    console.log("Hentet data", name, whitdrawal, reason);
  });
  
  app.get("/api/hello", (req, res) =&gt; {
    res.send({ express: "Denne meldingen kommer fra Express.js backend" });
  });
  app.get("/api/balance", (req, res) =&gt; {
    console.log("Hei fra balanse API punktet");
  });
  
  app.listen(port, () =&gt; console.log(`Back end is listening on port ${port}`));
  </code></pre>
  
  <p>My React component</p>
  
  <pre><code>import React from "react";
  import { withStyles } from "@material-ui/core/styles";
  import Button from "@material-ui/core/Button";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import TextField from "@material-ui/core/TextField";
  import axios from "axios";
  
  class MoneyForm extends React.Component {
    constructor() {
      super();
      this.state = {
        name: "",
        whitdrawal: "",
        reason: ""
      };
      this.handleEvent = this.handleEvent.bind(this);
      {
        /* check if can be removed */
      }
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleEvent = e =&gt; {
      this.setState({ [e.target.name]: e.target.value });
    };
  
    handleSubmit = e =&gt; {
      e.preventDefault();
      // get our form data out of state
      const { name, whitdrawal, reason } = this.state;
  
      axios.post("/api/formdata", { name, whitdrawal, reason }).then(result =&gt; {
        console.log(this.name);
        console.log(name);
      });
    };
  
    render() {
      const { name, whitdrawal, reason } = this.state;
      return (
        &lt;React.Fragment&gt;
          &lt;CssBaseline /&gt; {/*https://material-ui.com/style/css-baseline */}
          &lt;form onSubmit={this.handleSubmit} method="POST" action="/api/formdata"&gt;
            &lt;br /&gt;{" "}
            {/* Bytt ut med CSS block elementer eller noe slikt, bytt name på form fields til å hentes via JS  */}
            &lt;TextField
              required
              id="standard-required"
              label="Navn"
              className="tekstfelt"
              margin="normal"
              value={name}
              name="name"
              onChange={e =&gt; this.handleEvent(e)}
            /&gt;
            &lt;br /&gt;
            &lt;TextField
              required
              id="standard-required"
              label="Witdhdrawal amount"
              className="tekstfelt"
              margin="normal"
              value={whitdrawal}
              name="whitdrawal"
              onChange={e =&gt; this.handleEvent(e)}
            /&gt;
            &lt;br /&gt;
            &lt;TextField
              required
              id="standard-required"
              label="Reason"
              className="tekstfelt"
              margin="normal"
              value={reason}
              name="reason"
              onChange={e =&gt; this.handleEvent(e)}
            /&gt;
            &lt;br /&gt;
            &lt;Button
              type="submit"
              variant="contained"
              color="primary"
              className="Knapp"
            &gt;
              Penger
            &lt;/Button&gt;
          &lt;/form&gt;
          &lt;p&gt;
            Name: {this.state.name} &lt;br /&gt;
            Witdhdrawal amount: {this.state.whitdrawal} &lt;br /&gt;
            Reason: {this.state.reason}
          &lt;/p&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  export default MoneyForm;
  </code></pre>
  
  <p>I manage to show a message from Express in my React front end, so communication from Express to React works. I'd be happy to post my package.json files if that helps. Not sure exactly what info you guys need so please feel free to ask for additional details/code. </p>