A bit new to this, so i would be needing some clarity. I want a scenario where I would click a button, it goes to the REST api, initiates a get request from the REST api and populate some fields.
here is a dummy REST api i created in Node.Js
https://financeplus.herokuapp.com/api/getaccounts/00343799710
When Called it gets this information
{
"error": false,
"data": {
"id": 0,
"fullname": "Lucas Tarella",
"address": "144 British Hush Ave",
"city": "Emory",
"state": "Georgia",
"tel": "+1(715)-232-7600",
"email": "lucas@blackorigins.com",
"nationalID": "AD87334322",
"gender": "Male",
"birth_date": "1989-05-10",
"ccy": "USD",
"bal": 950000,
"accNum": "00343799710",
"created_at": "2021-11-03T11:39:07.000Z",
"updated_at": "2021-11-04T06:38:38.000Z"
},
"message": "users List."
}
Now i want it to populate the page with this information, thereby replacing the mmmmm with the respective data such as fullname, city, telephone , address, balance on the react component which looks thus
import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
const Balance = () => {
const[accNum, setAccNum] = useState('');
const[accDetails, setAccDetails] = useState('');
function getAccountBal(){
fetch('https://financeplus.herokuapp.com/api/getaccounts/'+accNum,{
method : 'GET',
mode : 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then((response)=>response.json()).then((responseJson)=>{
setAccDetails(responseJson.data)
})
}
return (
<div align="center">
<table border="0" width="98%">
<tr>
<td> </td>
</tr>
<tr>
<td className="homeFormTable">
<table border="0" width="100%">
<tr>
<td>
<img border="0" src="images/FinancePlus_color_colorLogo.png" width="157" height="36" /></td>
<td width="136">
<p align="center" />
<li className="Logout"><Link to="/openaccount" className="ForLogout">Logout</Link></li>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<div className="upMenuTable">
<div className="nav-links">
<ul>
<li><Link to="/homepage">Home</Link></li>
<li><Link to="/openaccount">Account Opening</Link></li>
<li><Link to="/balance">Account Balance</Link></li>
<li><Link to="/transfers">Transfers</Link></li>
<li><Link to="/cashmgt">Deposit/Withdrawals</Link></li>
</ul>
</div>
</div>
<div className="SideNav">
<div className="sideNav-links">
<ul>
<li><Link to="/homepage">Home</Link></li>
<li><Link to="/openaccount">Account Opening</Link></li>
<li><Link to="/balance">Account Balance</Link></li>
<li><Link to="/transfers">Transfers</Link></li>
<li><Link to="/cashmgt">Deposit/Withdrawals</Link></li>
</ul>
</div>
</div>
<div className="playTable">
<table>
<div align="center">
<tr>
<td>
<p align="right" />
<font face="Arial Black" size="1">
Account Number:
</font>
<input type="text" name="T1" size="59" onChange ={(e) =>setAccNum(e.target.value)} className="searchBoxAcc" />
</td>
<td width="121">
<p align="right" />
<input onClick={getAccountBal} type="submit" value="Search" name="B1" className="searchBoxBtn" />
</td>
</tr>
</div>
<div align="center" className="infoArea">
<tr>
<td width="18%" align="right"><font face="Arial Black" size="1">
Full Name </font>
</td>
<td width="33%" align="left">
<font face="Arial Black" size="2"> mmmm</font>
</td>
<td width="1%"> </td>
<td width="21%" align="right"><font face="Arial Black" size="1">
Address </font></td>
<td width="24%" align="left" rowspan="2">
<font face="Arial Black" size="2"> mmmmm</font><p />
<font face="Arial Black" size="2"> </font>
</td>
</tr>
<tr>
<td width="18%" align="right"><font face="Arial Black" size="1">
City </font>
</td>
<td width="33%" align="left">
<font face="Arial Black" size="2"> mmmmm</font>
</td>
<td width="1%"> </td>
</tr>
<tr>
<td width="18%" align="right"><font face="Arial Black" size="1">
Telephone </font>
</td>
<td width="33%" align="left">
<font face="Arial Black" size="2"> mmmm</font>
</td>
<td width="1%"> </td>
<td width="21%" align="right"><font face="Arial Black" size="1">
Balance </font></td>
<td width="24%" align="left" rowspan="2">
<font face="Arial Black" size="2"> mmmmm</font><p />
<font face="Arial Black" size="2"> </font>
</td>
</tr>
</div>
</table>
</div>
<div className="Footer">
<table className="footerTable">
<p className="reserved"> © Finance Plus 2021</p>
</table>
</div>
</table>
</div>
);
}
export default Balance;
I am new to this, So I need Clarity of some sort.
>Solution :
When the request give you an answer you have the information in your accDetails variable. You just need to print it where you want using {}…
for example {accDetails.fullname}