In the frontend I've made 2 buttons, one to create the data from a form and another the GET and display it onto the frontend, this is all being sent and received from an API and it works just fine when I use two separate buttons. What I want to do is combine the two to function only when the create button is clicked; I've tried putting the getData function into the createData function but it never works and I keep on getting errors. How can I fix this?

Frontend.js

import React, { useState, useRef, useEffect } from 'react';
import axios from 'axios'
import './App.css';

function App() {
  const cardHolderRef = useRef("");
  const balanceRef = useRef("");
  const [cardHolder, setCardHolder] = useState("");
  const [cardNumber, setCardNumber] = useState("");
  const [balance, setBalance] = useState("");
  const [expDate, setExpDate] = useState("");
  const [cvc, setCvc] = useState("");


  async function getCardData() {
    await axios.get("http://localhost:5000/", { crossdomain: true })
      .then(response => {
        setCardHolder(response.data.data.name_on_card);
        setCardNumber(response.data.data.card_pan);
        setBalance(response.data.data.amount   "  "   response.data.data.currency);
        setExpDate(response.data.data.expiration);
        setCvc(response.data.data.cvv);
      })
  };

  async function createCardData(e) {
    e.preventDefault();
    await axios.post("http://localhost:5000/", {
      cardHolder: cardHolderRef.current.value,
      balance: balanceRef.current.value
    })

    getCardData();// This isn't working at all
  };

  return (
    <div>
      <div className='vcard'>
        <div className='theBalance'>
          <h2>{balance}</h2>
        </div>
        <div className='numNcvc'>
          <h2 className='theNum'>{cardNumber}</h2>
          <h2 className='theCvc'>{cvc}</h2>
        </div>
        <div className='expNholder'>
          <h2>Expiry Date<br/> {expDate}</h2>
          <h2>Card Holder<br/> {cardHolder}</h2>
        </div>
      </div>

      <div className='details-div'>
        <form className='details'>
          <input 
            placeholder='Name on Card' 
            type="text" 
            id='cardholder'
            name='cardholder'
            ref={cardHolderRef}></input>
          <input 
            placeholder='Amount (in USD)' 
            type="text"
            id="cardbalance"
            name="cardbalance"
            ref={balanceRef}></input>
          <input placeholder='MTN MoMo Number' type="text"></input>
        </form>
        <button className='createCardBtn' onClick={createCardData}>
          Create Card
        </button>
        <button className='createCardBtn' onClick={getCardData}>
          Get Card Data
        </button>
      </div>
    </div>
  );
}

export default App;

Backend.js

const { response } = require('express');
const express = require('express');
const cors = require('cors');
const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const jsonParser = bodyParser.json();

const Flutterwave = require('flutterwave-node-v3');
const flw = new Flutterwave("FLWPUBK_TEST-63a79c5a6fe457d75a611b0f376e3e53-X", "FLWSECK_TEST-a6281194ef4ca095e794a1681fe32d69-X");

app.use(bodyParser.json());

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
  });

app.post("/", jsonParser, async (req, res) => {
    const cardHolder = req.body.cardHolder;
    const balance = req.body.balance;
    console.log(cardHolder);
    console.log(balance);

    // Payload: Flutterwave Card Details
    const payload = {
        "currency": "USD",
        "amount": balance,
        "billing_name": cardHolder,
        "billing_address": "2014 Forest Hills Drive",
        "billing_city": "React",
        "billing_state": "NY",
        "billing_postal_code": "000009",
        "billing_country": "US",
    }

    const createCardResponse = await flw.VirtualCard.create(payload);

    const newPayload = {
        "id": createCardResponse.data.id
    }

    const fetchResponse = await flw.VirtualCard.fetch(newPayload);
    console.log(fetchResponse);

    app.get('/', async (req, res) => {
        res.send(fetchResponse);
    })
});

app.use(bodyParser.json());

app.listen(5000, () => {console.log("Server started on port 5000")})

//createVcard();

CodePudding user response：

In the api response, you added the app.get method inside the app.post, and you aren't returning any data. You need to move the app.get outside the app.post and in the app.post return your data like this:

app.get('/', async (req, res) => {
...
}

app.post("/", jsonParser, async (req, res) => {
    const cardHolder = req.body.cardHolder;
    ....
    const fetchResponse = await flw.VirtualCard.fetch(newPayload);

    res.send(fetchResponse);
});