ReactJS and Node -- Error 400 bad request

Question

I am trying to build a react application which saves data into database.

I have the following classes:

server.js

let express = require('express');
let bodyParser = require('body-parser');
let morgan = require('morgan');
let pg = require('pg');
let cors = require('cors');
const PORT = 3000;

let pool = new pg.Pool({
    user: 'admin',
    database: 'dev',
    password: 'password',
    host: 'localhost',
    port: 5432,
    max: 10
});

let app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(morgan ('dev'));

app.use(function(request, response, next) {
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Origin, X-Requested-
With, Content-Type, Accept, Authorization")
next();
});

app.get('/api/creditcards', function(request, response) {
pool.connect(function(err, db, done) {
    if (err) {
        return response.status(400).send(err);
    } else {
        db.query('SELECT * FROM creditcards', function(err, table) {
            done();
            if (err) {
                response.status(400).send(err)
            }else {
                response.status(200).send(table.rows)
            }
        })
    }
})
});

app.post('/api/new-card', function(request, response) {
    var cardholder = request.body.cardholder;
    var cardnumber = request.body.cardnumber;
    var card_identifier = request.body.card_identifier;
    var expiration = request.body.expiration;
    var cvc = request.body.cvc;

  let values = [cardholder, cardnumber, card_identifier, expiration, cvc];

  pool.connect((err, db, done) => {
    if(err) {
        return response.status(400).send(err);
        } else {
            db.query('INSERT INTO creditcards (cardholder, cardnumber, card_identifier, expiration, cvc) VALUES ($1, $2, $3, $4, $5)', [cardholder, cardnumber, card_identifier, expiration, cvc] ,(err, table) => {
                done();
                if (err) {
                    return response.status(400).send(err)
                    } else {
                        console.log('DATA INSERTED');
                        response.status(201).send({message : 'Data inserted...'})
                        }
                })
            }
})
});

app.listen(PORT, () => console.log('Listening on port ' + PORT));

and SaveNewCard.js

import React from 'react';
import Modal from './Modal';
import Payment from 'payment';
import { Row, Col, FormGroup, ControlLabel, Button, Alert, Grid } from 'react-bootstrap';

class SaveNewCard extends React.Component {
    constructor() {
    super();

    this.state = {
        creditcards: [],
        isLoading: false,
        error: null,
    }
  }

  componentDidMount() {
  const { cardnumber, expiration, cvc } = this.refs;
        Payment.formatCardNumber(cardnumber);
        Payment.formatCardExpiry(expiration);
        Payment.formatCardCVC(cvc);
  console.log('Component has mounted')
var that = this;
fetch('http://localhost:3000/api/creditcards')
            .then(response => {
            console.log(response)
               if (response.ok) {
                  return response.json();
               } else {
                   throw new Error('Something went wrong ...');
                }
               })
                .then(data => that.setState({ creditcards: data.creditcards, isLoading: false }))
                .catch(error => this.setState({ error, isLoading: false }));
            }


addCreditCard(event) {
  var that = this;
  event.preventDefault();
  let card_data = {
    cardholder : this.refs.cardholder.value,
    cardnumber : this.refs.cardnumber.value,
    card_identifier : (this.refs.cardnumber.value).substr(15),
    expiration : this.refs.expiration.value,
    cvc : this.refs.cvc.value
};
console.log('Ez itt: ' + JSON.stringify(card_data))
var request = new Request('http://localhost:3000/api/new-card', {
    method: 'POST',
    headers: new Headers({ 'Content-Type': 'application/json',  }),
    body: JSON.stringify(card_data)
});
let creditcards = that.state.creditcards;
      creditcards.push(card_data);
        that.setState({
         creditcards : creditcards
})

console.log(creditcards)

fetch(request)
    .then(response => {
     console.log(request)
       if (response.ok) {
         return response.json();
       } else {
          throw new Error('Something went wrong ...');
       }
     })
       .then(data => this.setState({ creditcards: data.creditcards }))
       .catch(error => this.setState({ error }));
  }


  cardList() {
        return (<ul className="credit-card-list clearfix">
          <Alert fluid style={{ paddingLeft: 40}} bsStyle="warning">
             <strong>Please consider that only the following credit cards can be accepted:</strong>
          <li><i data-brand="visa" className="fa fa-cc-visa">VISA</i></li>
          <li><i data-brand="amex" className="fa fa-cc-amex">AMEX</i></li>
          <li><i data-brand="mastercard" className="fa fa-cc-mastercard">Master Card</i></li>
          </Alert>
        </ul>);
      }

    saveNewCardForm() {
    let creditcards = this.state.creditcards;
            return (
            <div>
                <form className="SaveNewCard" onSubmit={ this.handleSubmit } style={{ paddingLeft: 40, paddingRight: 600}}>
                    <Grid fluid style={{ paddingLeft: 60, paddingRight: 60}}>
                    <Row>
                     <Col xs={12}>
                       <FormGroup>
                         <ControlLabel>Cardholder Name</ControlLabel>
                            <input
                              onKeyUp= {this.setCardType}
                              className="form-control text-center"
                              type="text"
                              ref="cardholder"
                              placeholder="Your Name"
                            />
                        </FormGroup>
                       </Col>
                      </Row>
                      <Row>
                        <Col xs={ 12 }>
                          <FormGroup>
                            <ControlLabel>Card Number</ControlLabel>
                            <input
                              onKeyUp={ this.setCardType }
                              className="form-control text-center"
                              type="text"
                              ref="cardnumber"
                              placeholder="Card Number"
                            />
                          </FormGroup>
                        </Col>
                      </Row>
                      </Grid>
                      <Grid fluid style={{ paddingLeft: 60, paddingRight: 60}}>
                      <Row >
                        <Col xs={ 6 } sm={ 5 }>
                          <FormGroup>
                            <ControlLabel>Expiration</ControlLabel>
                            <input
                              className="form-control text-center"
                              type="text"
                              ref="expiration"
                              placeholder="MM/YYYY"
                            />
                          </FormGroup>
                        </Col>
                        <Col xs={ 6 } sm={ 4 } smOffset={ 3 }>
                          <FormGroup>
                            <ControlLabel>CVC</ControlLabel>
                            <input
                              className="form-control text-center"
                              type="text"
                              ref="cvc"
                              placeholder="CVC"
                            />
                          </FormGroup>
                        </Col>
                      </Row>
                      </Grid>
                    <Button bsStyle="primary" onClick={this.addCreditCard.bind(this)}>Submit</Button>
                    <Button onClick={this.removeCreditCard.bind(this)}>Delete</Button>
                    </form>
                    <ul>
                        {creditcards.map((creditcards => <li>{creditcards.cardholder}</li>))}
                    </ul>
                    </div>);
        }

        render() {
                  return (<div className="CreditCard">
                    { this.cardList() }
                    { this.saveNewCardForm() }
                  </div>);
                }

}

SaveNewCard.propTypes = {};


export default SaveNewCard;

But I got the following Bad Request 400 error:

enter image description here

And:

enter image description here

As I can understand, my request does not contain the inserted data... I assume the problem is here somewhere....:

enter image description here

I let to write the "card_data" content to the console, it is there:

enter image description here

Any idea, why am I getting nulls as input data?

Sorry for this long post....

UPDATE:

The code fails at this line:

I replaced the "request.body.XY" variables with direct input and in that case the insert to database was working.... It may something with my request...

Answer 1

the problem is that you are not using fetch correctly . to do a post request you should do it like so :

const options = { 
  method: 'post',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(card_data)
}    

fetch('http://localhost:3000/api/new-card', options)
  .then(response => {
     console.log(request)        
     if (response.ok) {
         return response.json();
       } else {
          throw new Error('Something went wrong ...');
       }
  })
  .then(data => this.setState({ creditcards: data.creditcards }))
  .catch(error => this.setState({ error }));