Variable not being sent from Axios to API point in react

Question

I have a Express/React app (never to reach prod.) that should allow a users to take out x-amount of money from the database.

To do this I have a whidrawal page with a bunch of buttons that are all submit buttons, they contain some value and when pressing the value that sum should be subracted from the database. My code works fine if I send hardcoded values in the variables but not when trying to send data from form.

A console log in the back end for req.body console.log('req.body is: ', req.body); returns [0] req.body is: { amount: '', serverCardNumber: '666' }, by hard setting amount everything works.

This is my react code:

import React from 'react';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import axios from 'axios';
import { Link } from 'react-router-dom';

class WithdrawalForm extends React.Component {
  constructor() {
    super();
    this.state = {
      amount: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onClick = () => {
    this.setState({
      amount: this.state.amount
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { amount } = this.state;

    // get our form data out of state
    const serverCardNumber = sessionStorage.getItem('cardnumber');

    axios({
      method: 'post',
      url: '/api/whidrawal',
      data: {
        amount,
        serverCardNumber
      }
    });
  };

  render() {
    const { amount } = this.state;
    return (
      <React.Fragment>
        <CssBaseline /> {/*https://material-ui.com/style/css-baseline */}
        <h1>How much do you want to withdraw?</h1>
        <form onSubmit={this.handleSubmit} method="POST" action="/api/whidrawaly">
          <br />
          {/* Bytt ut med CSS block elementer eller wwnoe slikt, bytt name på form fields til å hentes via JS  */}
          <br />
          <div className="container">
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="200"
              color="primary"
              className="floatLeft"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">200 NOK</div>
            </Button>
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="300"
              color="primary"
              className="floatRight"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">300 NOK</div>
            </Button>
            <br />
            <br />
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="400"
              color="primary"
              className="floatLeft"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">400 NOK</div>
            </Button>
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="500"
              color="primary"
              className="floatRight"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">500 NOK</div>
            </Button>
            <br />
            <br />
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="700"
              color="primary"
              className="floatLeft"
              defaultValue={amount}
              name="amount"
            >
              <div className="test"> 700 NOK</div>
            </Button>
            <Button
              type="submit"
              variant="contained"
              onClick={this.onClick}
              value="1000"
              color="primary"
              className="floatRight"
              defaultValue={amount}
              name="amount"
            >
              <div className="test">1000 NOK</div>
            </Button>
          </div>
          <br />
          <br />
          <div className="marginTop">
            <Button variant="contained" color="secondary" className="Knapp">
              <Link to="/otheramount" className="test">
                Other amount
              </Link>
            </Button>
          </div>
          <br />
          <br />
        </form>
      </React.Fragment>
    );
  }
}
export default WithdrawalForm;

In my back end I'm handling this in a file in my controller, and call the api point using express router in server.js

back end handling:

const connection = require('../models/loginrouters');
const express = require('express');
const router = express.Router();
const takeMoney = require('../models/whidrawalDb');

router.post('/', function(req, res) {
  console.log('req.body is: ', req.body);
  console.log(req.body.amount);
  console.log(req.body.cardnumber);
  const amount = req.body.amount;
  const cardnumber = req.body.serverCardNumber;

  takeMoney(amount, cardnumber);
});

module.exports = router;

For some reason the amount is not sent from the buttons to the state, and therefore not sent to back end. But I can't figure out why, any ideas?

Answer 1

You are setting the amount to existing amount which is empty string on every click.

this.setState({
  amount: this.state.amount    // same value every time
});

If you want a different value you have to pass the value to the callback. Here is example of creating a callback for each specific amount per button.

setAmount = (amount) => {
    return (event) => {
        this.setState({ amount }) 
    }
}

Example usage:

<button onClick={this.setAmount(700)} />