rendering content dynamically in react native not working - reactjs

Question

I am trying to render content dynamically. I have an array of JSON data that I loop over, and, for now (testing purposes), create a text node "hey" for each element of that array,pushing it to another array called renderedData. I am trying to render the contents of this array, renderedData, but it is not working. I have no idea why - nothing is rendered, yet when I try a dummy array that is declared on the spot, such as "test", it works.
import * as React from 'react';
import { StyleSheet, Button, TextInput, Modal, Alert, TouchableHighlight, SafeAreaView, SectionList, FlatList, ListView } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import AsyncStorage from '#react-native-community/async-storage';
import { useState } from 'react';
import { parse } from '#babel/core';
import { getInitialURL } from 'expo-linking';
const payments: any[] = []
export default function PaymentsScreen(){
const getData = async () => {
try {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys)
return result
} catch(e) {
console.log(e)
}
}
React.useEffect(() => {
getData()
})
const data: (string | null)[] = []
const renderedData: string[] = []
async function parseData(){
const payments = await getData()
if (payments != null && payments != undefined) {
console.log(payments)
payments.map((eachPayment: any[]) => {
if (eachPayment[1] != null && eachPayment[1].includes("{"))
data.push(eachPayment[1])
})
}
data.map((eachPayment: any) => {
if (eachPayment != null) renderedData.push("hey")
})
return data
}
parseData()
return (
<View>
{data.map((info: any) => <Text>{info}</Text>)}
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 16
},
item: {
backgroundColor: "#f9c2ff",
padding: 20,
marginVertical: 8
},
header: {
fontSize: 32,
backgroundColor: "#fff"
},
title: {
fontSize: 24
}
});

Answer 1

Since you have async call, here is how i would do it :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => {
const fakeApiData = [1, 2, 3];
const [data, setData] = React.useState([]);
const [renderedData, setRenderedData] = React.useState([]);
const getApiDataAsync = () => Promise.resolve(fakeApiData);
// Equal to componentDiMount()
React.useEffect(() => {
// This is your async call to get your data
const data = getApiDataAsync().then(data => setData(data));
}, []);
// Effect triggered after data changes, so when you get your data
React.useEffect(() => {
const futurRenderedData = [];
data.map(item => futurRenderedData.push(item));
setRenderedData(futurRenderedData);
}, [data]);
return (
<div>
{renderedData.map(item => <span>{item} </span>)}
</div>
);
};
render(<App />, document.getElementById("root"));
The idea is to get your data, be sure to have it, either through a promise, an await, or an observable, and then setting your renderedData.
Here is your code modified, tell me if there is still something wrong :
export default function PaymentsScreen() {
const [data, setData] = React.useState(new Array<string>());
const [renderedData, setRenderedData] = React.useState(new Array<string>());
const getData = async () => {
try {
const keys = await AsyncStorage.getAllKeys();
const result = await AsyncStorage.multiGet(keys);
return result;
} catch (e) {
console.log(e);
}
};
async function parseData() {
const payments = await getData();
if (payments) {
payments.foreach((eachPayment: any[]) => {
if (eachPayment[1] && eachPayment[1].includes('{'))
data.push(eachPayment[1]);
});
}
data.map((eachPayment: any) => {
if (eachPayment != null) setRenderedData('hey');
});
return data;
}
React.useEffect(async () => {
setData(await parseData());
}, []);
return (
<View>
<View>
{data.map((info: any) => (
<Text>{info}</Text>
))}
</View>
<View>
{renderedData.map(item => <span>{item} </span>)} {/*If this appear in the html then it works*/}
</View>
</View>
);
}