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": "[email protected]",
"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.
CodePudding user response：
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}