I have two screen. On one I have some json data listed as:
AacompanyBbcompanyWhen user clicks on A the value A get passed to second class and I use that data to fetch some json data related to it and display on second screen. I want to save that fetched data on second screen to local storage.
I want to save data to this class:
import React, { useState, useContext, useEffect } from "react";import { AsyncStorage } from "react-native";const StocksContext = React.createContext();export const StocksProvider = ({ children }) => { const [state, setState] = useState([]); return (<StocksContext.Provider value={[state, setState]}> {children}</StocksContext.Provider> );};export const useStocksContext = () => { const [state, setState] = useContext(StocksContext); // can put more code here function addToWatchlist(newSymbol) { //FixMe: add the new symbol to the watchlist, save it in useStockContext state and persist to AsyncStorage } useEffect(() => { // FixMe: Retrieve watchlist from persistent storage }, []); return { ServerURL: 'http://131.181.190.87:3001', watchList: state, addToWatchlist };};This is my second screen class:
import React, { useState, useEffect } from "react";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 }) { const { ServerURL, watchList } = useStocksContext(); const [state, setState] = useState({ myListData: [], gretting:"", /* 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(); // 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]; //this is displayed on second screen and I want to save this data even when user goes back to first screen and comes back to second screen again let movie = ( <View style={styles.text}><Text style={styles.text} key={item.symbol}> {item.high}</Text><Text style={styles.text} key={item.symbol}> {item.close}</Text><Text>{state.gretting}</Text><Text>yooo</Text></View>)let printme =( console.log("yes"), route("useStocksContext", { stuff: movie })) return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}><Text style={styles.text}>bb</Text><View>{movie}</View><Text style={styles.text} onPress={printme}>press me</Text> //passing data</View></TouchableWithoutFeedback> );}const styles = StyleSheet.create({ text: { color: "black", backgroundColor: "white", },});I am assuming I need to send the data that I want to save on second screen to my another class (where I will perform all the saving of data). I am trying to pass my movies to another class as everything inside it is displayed on second screen and that's what I am trying to save on local storage so the data is still there on second screen even if user goes to first screen and comes back to second screen using navigator at the bottom of the screen.
let printme =( console.log("yes"), route("useStocksContext", { stuff: movie }) )in return method:
<Text style={styles.text} onPress={printme}>press me</Text> //passing data Although I have it inside text field I need to just send the data once the screen refresh or user goes to another scree, but I am not sure how to do that. Also, when I use printMe() to pass the data nothing works. How can I pass my data to another class and save it to local storage?