Need assistance in rendering my data in a table. Ive been able to filter the data into an array, but when the initial data from the webserver is finished, i get updates consisting of the same data, so not sure how to update my existing array? My unique key would be 'TickerFeed.Pair'.
Im able to render out the initial response from the server, but when i get new data, for example (1st response would be Pair: BTC-USDT, Volume: 4534343) (2nd response would be exactly the same, except Volume and other data would change). Im at the stage where my table doesn't even when my state TickerFeed updates. Any idea what could be the issue?
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");const DATA = []function App() { 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> );}My webpage looks like this:
