I am using react-native and expo. I have some data that is displayed on the screen (this is my second screen) such as:
let item = state.myListData.length && state.myListData[0];let movie = (<View><Viewstyle={{flexDirection: 'row',backgroundColor: 'black',alignItems: 'center',}}><Text style={{ width: '50%', color: 'white' }}>{item.symbol}</Text><Text style={{ width: '10%', color: 'white' }} key={item.open}>{item.open}</Text><Textstyle={{width: '30%',color: 'white',backgroundColor: 'red',marginVertical: 5,paddingHorizontal: 10,borderRadius: 10,}}key={item.close}>{item.close}</Text></View><View style={styles.bottomdata}><Text style={[styles.text, { alignSelf: 'center' }]} key={item.name}>{item.name}</Text><View style={styles.row}><View style={styles.rowItem}><Text style={styles.text}>OPEN</Text><Text style={styles.text}>{item.open} </Text></View><View style={styles.rowItem}><Text style={styles.text}>CLOSE</Text><Text style={styles.text}>{item.close}</Text></View></View><View style={styles.row}><View style={styles.rowItem}><Text style={styles.text}>LOW</Text><Text style={styles.text}>{item.low} </Text></View><View style={styles.rowItem}><Text style={styles.text}>HIGH</Text><Text style={styles.text}>{item.high}</Text></View></View><View style={styles.rowItem}><Text style={styles.text}>VOLUME</Text><Text style={styles.text}>{item.volumes}</Text></View></View></View>);How do I save this data to my screen even though if user goes back to first screen and comes back to second screen it should still be there, but it disappears at the moment since I am not sure how to store it in local storage.
I looked up online and wrote this:
const x = {key:"value"}savingdata = () => {if (movie){let storeData = async () => { try { await AsyncStorage.setItem('x', movie ); console.log(storeData); } catch (error) { // Error saving data console.log(error); }};}};This doesn't work at all. I am new to saving data so I am not sure how to do it. If someone can please help me?
That's my whole code for second screen:
import React, { useState, useEffect } from "react";import { AsyncStorage } from "react-native";import { TouchableWithoutFeedback, Keyboard, FlatList, TextInput, Button, Text,} from "react-native";import { StyleSheet, View /* include other react-native components here as needed */,} from "react-native";import { useStocksContext } from "../contexts/StocksContext";import { scaleSize } from "../constants/Layout";// FixMe: implement other components and functions used in StocksScreen here (don't just put all the JSX in StocksScreen below)export default function StocksScreen({ route, navigation }) { const { ServerURL, watchList } = useStocksContext(); const [state, setState] = useState({ myListData: [], _storeData:[] /* FixMe: initial state here */ }); const { stuff } = route.params; renderWithData = () => { return fetch(`http://131.181.190.87:3001/history?symbol=${stuff}`) .then((res) => res.json()) .then((json) => { setState({ isLoaded: true, myListData: json, }); // console.log(state.myListData[0]); }); }; useEffect(() => { renderWithData(); savingdata(); // FixMe: fetch stock data from the server for any new symbols added to the watchlist and save in local StocksScreen state }, [watchList]); //let item = state.myListData[0]; let item = state.myListData.length && state.myListData[0];let movie = (<View><Viewstyle={{flexDirection: 'row',backgroundColor: 'black',alignItems: 'center',}}><Text style={{ width: '50%', color: 'white' }}>{item.symbol}</Text><Text style={{ width: '10%', color: 'white' }} key={item.open}>{item.open}</Text><Textstyle={{width: '30%',color: 'white',backgroundColor: 'red',marginVertical: 5,paddingHorizontal: 10,borderRadius: 10,}}key={item.close}>{item.close}</Text></View><View style={styles.bottomdata}><Text style={[styles.text, { alignSelf: 'center' }]} key={item.name}>{item.name}</Text><View style={styles.row}><View style={styles.rowItem}><Text style={styles.text}>OPEN</Text><Text style={styles.text}>{item.open} </Text></View><View style={styles.rowItem}><Text style={styles.text}>CLOSE</Text><Text style={styles.text}>{item.close}</Text></View></View><View style={styles.row}><View style={styles.rowItem}><Text style={styles.text}>LOW</Text><Text style={styles.text}>{item.low} </Text></View><View style={styles.rowItem}><Text style={styles.text}>HIGH</Text><Text style={styles.text}>{item.high}</Text></View></View><View style={styles.rowItem}><Text style={styles.text}>VOLUME</Text><Text style={styles.text}>{item.volumes}</Text></View></View></View>); const x = {key:"value"}savingdata = () => {if (movie){let storeData = async () => { try { await AsyncStorage.setItem('x', movie ); console.log(storeData); } catch (error) { // Error saving data console.log(error); }};}}; return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}> {movie}</View></TouchableWithoutFeedback> );}I want to save data in different class, if that possible, so my code is not messy. But, saving in the same class in okay as well whatever works. Any help is appreciated.