React function doesn't work when placed inside another function - reactjs

Question

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();

Answer 1

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);
});