How can I render api response in React? - reactjs

Question

I am using sock.js topic subscription for getting data. I can type response to console with this;
<div>
<SockJsClient url='http://localhost:8080/websocket-example' topics={['/topic/currency']}
onMessage={(msg) => {console.log(msg);}}
ref={(client) => {this.clientRef = client}}>
</SockJsClient>
</div>
But i couldn't render it.
Questions;
I am making topic subscription in the render function. Do I have to
do it on another function? If yes how can i achive that?
After the first question, i have to render it. Incoming messages;
{parity: "EURTRY", buy: 7.873162974672604, sell: 7.071410177380406}
{parity: "USDTRY", buy: 7.58763763316203, sell: 7.158500227651455}
I want to render it in a table. Using bootstrap for the table. Each message will be updated in the table by parity property. There can be a switch for it.
<div class="row">
<div class="col-md-12">
<table id="currencies" class= "table table-hover" >
<thead class="thead-dark">
<tr>
<th>Currency Pair</th>
<th>Buy</th>
<th>Sell</th>
</tr>
</thead>
<tbody>
<tr>
<td>USDTRY</td>
<td id="usdTryBuy"></td>
<td id="usdTrySell"></td>
</tr>
<tr>
<td>EURTRY</td>
<td id="eurTryBuy"></td>
<td id="eurTrySell"></td>
</tr>
<tr>
<td>GBPTRY</td>
<td id="gbpTryBuy"></td>
<td id="gbpTrySell"></td>
</tr>
<tr>
<td>EURUSD</td>
<td id="eurUsdBuy"></td>
<td id="eurUsdSell"></td>
</tr>
</tbody>
</table>
</div>
</div>
Thanks for your valuable thoughts.

Answer 1

iterate it using map function
array
let arr = [{parity: "EURTRY", buy: 7.873162974672604, sell: 7.071410177380406},
{parity: "USDTRY", buy: 7.58763763316203, sell: 7.158500227651455}]
JSX
<div class="row">
<div class="col-md-12">
<table id="currencies" class= "table table-hover" >
<thead class="thead-dark">
<tr>
<th>Currency Pair</th>
<th>Buy</th>
<th>Sell</th>
</tr>
</thead>
<tbody>
{arr.map((item,i)=>
<tr key={i}>
<td>USDTRY: {item.parity}</td>
<td id="usdTryBuy">{item.buy}</td>
<td id="usdTrySell">{item.sell}</td>
</tr>
)}
</tbody>
</div>
</div>