Need assistance in rendering my data in a table. Ive been able to filter the data into an array, but when I get updates from the server, I'm unable to update my array storing the data. I think it has to do with DATA.push()
I basically need to update each pair with it's respected values.Any idea how to implement this?Thanks!
My code:
import React, { useEffect, useState } from 'react';import { Button, StyleSheet, Text, View, Dimensions, TextProps, FlatList } from 'react-native';import { OrionUnit } from "@orionprotocol/sdk";import { Wallet } from "ethers";import { DataTable } from 'react-native-paper';import * as zodUtil from './node_modules/zod/lib/helpers/util';const orionUnit = new OrionUnit("bsc", "production");function App() { const DATA = [] const [TickerFeed, SetTickerFeed] = useState([]); orionUnit.priceFeed.ws.subscribe("allTickers", { callback: (tickers) => { let keys = zodUtil.util.objectKeys(tickers); let values: DATA[] = zodUtil.util.objectValues(tickers); for (let i = 0; i < keys.length; i++) { DATA.push({ Pair: keys[i], LastPrice: values[i].lastPrice, Volume: values[i].volume, OpenPrice: values[i].openPrice, LowPrice: values[i].lowPrice, HighPrice: values[i].highPrice }) } SetTickerFeed(DATA); } } ); return (<View style={styles.container}><DataTable><DataTable.Header><DataTable.Title>Pair</DataTable.Title><DataTable.Title>LastPrice</DataTable.Title><DataTable.Title>Volume</DataTable.Title><DataTable.Title>OpenPrice</DataTable.Title><DataTable.Title>LowPrice</DataTable.Title><DataTable.Title>HighPrice</DataTable.Title></DataTable.Header> {TickerFeed.map((item, index) => (<DataTable.Row key={item.Pair}><DataTable.Cell>{item.Pair}</DataTable.Cell><DataTable.Cell numeric>{item.LastPrice}</DataTable.Cell><DataTable.Cell numeric>{item.Volume}</DataTable.Cell><DataTable.Cell numeric>{item.OpenPrice}</DataTable.Cell><DataTable.Cell numeric>{item.LowPrice}</DataTable.Cell><DataTable.Cell numeric>{item.HighPrice}</DataTable.Cell></DataTable.Row> ))}</DataTable></View> );}The response when logging (keys,values)
My webpage looks like this:
