I am trying to display my fetched api data to the stimulator.When I print it in console. It does print the fetched api, but on the stimulator screen I cannot see anything. I assume its not printing anything on screen. My api has name, class, company. I need to only print the name and class on the screen like nameclass so name first and on bottom of it, it's class. I am using react-native and expo and displaying the data on iOS stimulator.
My code:
import React, { useState, useEffect } from "react";import { StyleSheet, View, TouchableWithoutFeedback, Keyboard, FlatList, TextInput, Button, Text,} from "react-native";import { useStocksContext } from "../contexts/StocksContext";import { scaleSize } from "../constants/Layout";import { Ionicons } from "@expo/vector-icons";import { ListItem } from "react-native";export default function SearchScreen({ navigation }) { const { ServerURL, addToWatchlist } = useStocksContext(); const [state, setState] = useState({ myListData: [], }); useEffect(() => { renderWithData(); SearchScreen state }, []); renderWithData = () => { return fetch("http://131.181.190.87:3001/all") .then((res) => res.json()) .then((json) => { setState({ isLoaded: true, myListData: json, }); setTimeout(() => { console.log(state.myListData); }, 10000); }); }; return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}><TextInput style={styles.textinput} placeholder="Search here" placeholderTextColor="white" /><FlatList style={styles.flatstuff} data={state.myListData} keyExtractor={(item) => item.symbol} renderItem={({ item }) => <Text key={item.symbol}>{item.data}</Text>} /></View></TouchableWithoutFeedback> );}const styles = StyleSheet.create({ textinput: { color: "white", height: "20", fontSize: 18, }, text: { color: "white", }, flatstuff: { color: "white", },});I am not sure what am I doing wrong, but can someone tell why is it not printing on screen (stimulator) iOS?