Using React js to submit some text boxes to SQL database

Question

I am trying to submit a couple text boxes to my SQL database using React js through a post request, then on the server side I am listening for the post and querying the data to my database. Right now both values are returning "undefined" regardless of what the user inputs into the form, so I think I've screwed up the React side code. This is the code I am using

Server.js:

var express = require('express');
var app = express();
var sql = require("mssql");
const bodyParser = require('body-parser');
app.use(bodyParser.json());

var config = {
    user: 'user',
    password: 'pass',
    server: 'localhost', 
    database: 'Master' 
};


app.post('/', function(req, res) {
    res.set('Access-Control-Allow-Origin', '*');
    const { FirstName, LastName } = req.body;
    let connection = new sql.ConnectionPool(config, function(err) {
        let request = new sql.Request(connection);
        request.query("insert into persons (FirstName, LastName) values ('" + FirstName + "', '" + LastName + "')");
    });
    res.send({ message: 'Success'})
});

app.listen(5000, () => {console.log('Server is running..')});

And here is my react code...

postData.js:

import React, { Component } from 'react';

class postData extends Component {

    constructor() {
        super();
        this.state = { user: {} };
        this.onSubmit = this.handleSubmit.bind(this);
      }

      handleSubmit(e) {
        e.preventDefault();
        var self = this;
        // On submit of the form, send a POST request with the data to the server.
        fetch('http://localhost:5000', { 
            method: 'POST',
            body: {
              FirstName: self.refs.FirstName,
              LastName: self.refs.LastName
            }
          })
          .then(function(response) {
            return response.json()
          }).then(function(body) {
            console.log(body);
          });
      }
      render() {
        return (
          <form onSubmit={this.onSubmit}>
            <input type="text" placeholder="First Name" ref="FirstName"/>
            <input type="text" placeholder="Last Name" ref="LastName"/>
            <input type="submit" />
          </form>
        );
      }
}

export default postData;

Again, I'm pretty sure I've screwed up the code on the React side, but I'm pretty new to all this so I'm not sure where to start troubleshooting. When I console.log the req.body on the server side it just returns {}, so it seems like there isn't any data being sent from the react script.

Thanks!

So when you console.log on the client side, what are the values being sent? — Nick.Mc
– Nick.Mc, Commented Apr 20, 2019 at 11:48

Djaenike · Accepted Answer · 2019-04-22 13:47:51Z

1

Thanks for all the help guys. I incorporated a lot of the recommendations you guys gave, but the final straw was the following in my server.js code

app.use(express.json({
    type: ['application/json', 'text/plain']
  }));

Once I included this change I was able to eliminate the undefined error I was getting

answered Apr 22, 2019 at 13:47

Djaenike

1,8955 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vitomadio · Accepted Answer · 2019-04-20 11:58:48Z

0

Add these lines on fetch request:

fetch('http://localhost:5000', 
    { method: 'POST',
    headers: new Headers({
        "Content-Type":"application/json"
    }),
    body: JSON.stringify({ 
        FirstName: self.refs.FirstName,
         LastName: self.refs.LastName }) 
})

Then in your server

app.post('/', function(req, res) { 
    res.set('Access-Control-Allow-Origin', '*'); 
    const body = JSON.parse(req.body);
    let connection = new sql.ConnectionPool(config, function(err) { 
    let request = new sql.Request(connection);
    request.query("insert into persons (FirstName, LastName) values ('" + body.FirstName + "', '" + body.LastName + "')"); 
    });
     res.send({ message: 'Success'})
 });

Hope this helps.

answered Apr 20, 2019 at 11:58

vitomadio

1,1308 silver badges15 bronze badges

1 Comment

Djaenike Over a year ago

Thank you sir. Getting an error on the JSON.stringify part "TypeError: Converting circular structure to JSON". Need to restructure the body?

Antonio Idalécio · Accepted Answer · 2019-04-20 13:26:46Z

0

To make your code work just replace this part:

body: {
  FirstName: self.refs.FirstName,
  LastName: self.refs.LastName
}

by this:

body: {
  FirstName: self.refs.FirstName.value,
  LastName: self.refs.LastName.value
}

but I would suggest you to do just like @Yousaf did, and use React.createRef(); to create refs to elements in React

answered Apr 20, 2019 at 13:26

Antonio Idalécio

364 bronze badges

1 Comment

Djaenike Over a year ago

Thanks, but still getting undefined for my values. When I console.log the req.body it just returns {}

Collectives™ on Stack Overflow

Using React js to submit some text boxes to SQL database

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related