# How to submit form data to a RESTFUL API in React?

**URL:** <https://forum.freecodecamp.org/t/how-to-submit-form-data-to-a-restful-api-in-react/163032>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [December 9, 2017, 11:56pm UTC](https://forum.freecodecamp.org/t/how-to-submit-form-data-to-a-restful-api-in-react/163032 "2017-12-09T23:56:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon52159105](https://avatars.discourse-cdn.com/v4/letter/a/45deac/32.png) [@anon52159105](https://forum.freecodecamp.org/u/anon52159105)\
**Post date:** [December 9, 2017, 11:56pm UTC](https://forum.freecodecamp.org/t/how-to-submit-form-data-to-a-restful-api-in-react/163032/1 "2017-12-09T23:56:25Z")

</div>

I am stuck and need help submitting form data in React to my express API. How can I configure the form to send a POST Request to /api/register so the user’s account can be created? (certain checks like duplicate users and such still need to be added but this is what I have so far)

* * *

**Express app.js**

```javascript
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var helmet = require('helmet')

var index = require('./routes/index');
var register = require('./routes/register');

var app = express();

// Connect to mongoose
mongoose.Promise = global.Promise;
mongoose.connect("mongodb://localhost/mydatabase");

// MongoDB Users Schema (Used for Login and Registration)
var userSchema = new mongoose.Schema({
  username: String,
  email: String,
  password: String,
  salt: String,
  usergroup: 0,

});
var User = mongoose.model("User", userSchema);

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(helmet())

app.use('/', index);
app.use('/api/register', register);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

```

**Register.js Express Route**

```javascript
var express = require('express');
var router = express.Router();

/* GET api/register */
router.get('/', function(req, res, next) {
  res.status(503).send("Oh noes! You sent a GET request - please send your request as a POST request. K Thx Bye!");
});

/* POST api/register */
router.post('/', function(req, res, next) {
  if (!req.body) return res.sendStatus(400)
  var regdata = new User(req.body);
  regdata.save()
  .then(item => {
     res.status(200).send("Success, Your registration has been saved to the database!")
   })
   .catch(err => {
     res.status(400).send("Unable to save the item to the database!");
   });
});

module.exports = router;

```

**Register.js React View**

```jsx
import React from 'react'

var panelStyle = {
	'max-width': '80%',
	margin: '0 auto'
}

const Register = () => (
  <div>
    <div class="panel panel-primary" style={panelStyle}>
      <div class="panel panel-heading">React Forum - Register</div>
      <div class="panel panel-body">
        <form onsubmit="return false;">
          <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" /> <br />
          <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="me@example.com" /> <br />
          <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="me@example.com" /> <br />
          <strong>Password:</strong> <br /> <input type="password" name="password" placeholder=" ********" /> <br />
          <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder=" ********" /> <br /><br />
          <button class="btn btn-primary">Register Account</button>
        </form>
      </div>
    </div>
  </div>
)

export default Register

```

---

<div class="post-metadata">

**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\
**Post date:** [December 10, 2017, 2:20am UTC](https://forum.freecodecamp.org/t/how-to-submit-form-data-to-a-restful-api-in-react/163032/2 "2017-12-10T02:20:53Z")

</div>

Your form in your React component should post the request to the API.

You can pass something like a `handlePost` method to your Register.js component as a prop. Your handlePost method would likely use the native fetch API (see a sample [here](https://googlechrome.github.io/samples/fetch-api/fetch-post.html)) or use the axios module which has slightly better cross browser support, iirc.

How familiar are you with React? Have you worked with methods / functions that you pass around before? It’s a little complicated if you’ve not done it before…

---

<div class="post-metadata">

**Author:** ![deseanellis](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/deseanellis/32/38223_2.png) [@deseanellis](https://forum.freecodecamp.org/u/deseanellis)\
**Post date:** [December 10, 2017, 3:02am UTC](https://forum.freecodecamp.org/t/how-to-submit-form-data-to-a-restful-api-in-react/163032/3 "2017-12-10T03:02:48Z")

</div>

Well if you don’t want to use Redux or Redux Form, I would advise that you manage the form fields data in the component’s state. You would also need a method to post the data.

For requests like this I suggest you install “axios” from the NPM. //npm install axios --save

See below, bear in mind this is not test, I just speed typed this, you would need to review for errors. Also I only did an example for “username”.

```auto
import React, { Component } from 'react';
import axios from 'axios';

var panelStyle = {
	'max-width': '80%',
	margin: '0 auto'
}

class Register extends Component {
  constructor() {
   super();

    this.state = {
      formFields: {username: ''}
    }
  }

  render() {
    return(
     <div>
    <div class="panel panel-primary" style={panelStyle}>
      <div class="panel panel-heading">React Forum - Register</div>
      <div class="panel panel-body">
        <form onsubmit={this.formHandler(this.state.formFields)}>
          <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.username} /> <br />
          <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="me@example.com" /> <br />
          <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="me@example.com" /> <br />
          <strong>Password:</strong> <br /> <input type="password" name="password" placeholder=" ********" /> <br />
          <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder=" ********" /> <br /><br />
          <button class="btn btn-primary">Register Account</button>
        </form>
      </div>
    </div>
  </div>

    );
  }

  inputChangeHandler(e) {
   let formFields = {...this.state.formFields};
   formFields[e.target.name] = e.target.value;
   this.setState({
    formFields
   });
  }

  formHandler(formFields) {
   axios.post('/api/register', formFields)
     .then(function(response){
       console.log(response);
       //Perform action based on response
   })
     .catch(function(error){
       console.log(error);
       //Perform action based on error
     });
  }
}

export default Register

```

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 18, 2021, 8:24am UTC](https://forum.freecodecamp.org/t/how-to-submit-form-data-to-a-restful-api-in-react/163032/5 "2021-01-18T08:24:36Z")

</div>