I have some data on my screen as you can see in the screenshot. When user clicks on first screen (it has some symbols with their name) it send them to second screen (screenshot below) and show the data related to that symbol.
I can save the data by pressing the store button, but I want to display the jsx data so here it is movie. If user let's say click on symbol AAL (on first screen) it sends them to second screen and you AAL symbol with it's details at the bottom. Now user goes back to first screen and clicks on ABBV now we add ABBV at the top of second screen and show data related to it at the bottom of screen and so on. How can I do that?
My code:
import React, { useState, useEffect } from "react";import { AsyncStorage } from "react-native";import { TouchableWithoutFeedback, Keyboard, FlatList, TextInput, Button, Text,} from "react-native";import { StyleSheet, View ,} from "react-native";import { useStocksContext } from "../contexts/StocksContext";import { scaleSize } from "../constants/Layout";export default function StocksScreen({ route, navigation }) { const { ServerURL, watchList } = useStocksContext(); const [state, setState] = useState({ myListData: [], }); 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]; //that's what I want to store on my screenlet movie = (<View><Viewstyle={{flexDirection: 'row',backgroundColor: 'black',alignItems: 'center',}}><Text style={{ width: '50%', color: 'white', fontSize: 18 }}>{item.symbol}</Text><Text style={{ width: '20%', color: 'white',fontSize: 18 }} key={item.open}>{item.open}</Text><Textstyle={{width: '34%',color: 'white',fontSize: 16,backgroundColor: 'red',marginVertical: 5,marginHorizontal:-10,paddingHorizontal: 35,padding: 4,borderRadius: 10,borderColor:"red",overflow:"hidden"}}key={item.close}>{item.close}</Text></View><View style={styles.bottomdata}><Text style={[styles.name, { alignSelf: 'center' }]} key={item.name}>{item.name}</Text><View style={styles.row}><View style={styles.rowItem}><Text></Text></View><View style={styles.rowItem}><Text></Text></View></View><View style={styles.row}><View style={styles.rowItem}><Text style={styles.label}>OPEN</Text><Text style={styles.text}>{item.open} </Text></View><View style={styles.rowItem}><Text style={styles.label}>CLOSE</Text><Text style={styles.text}>{item.close}</Text></View></View><View style={styles.row}><View style={styles.rowItem}><Text style={styles.label}>LOW</Text><Text style={styles.text}>{item.low} </Text></View><View style={styles.rowItem}><Text style={styles.label}>HIGH</Text><Text style={styles.text}>{item.high}</Text></View></View><View style={styles.rowItem}><Text style={styles.label}>VOLUME</Text><Text style={styles.text}>{item.volumes}</Text></View></View></View>);//right now just storing the json dataconst x ="key";const storeData = async (value) => { try { const jsonValue = JSON.stringify(movie) console.log(jsonValue); await AsyncStorage.setItem(x,jsonValue) console.log("storing.."); } catch (e) { // saving error console.log("error storing..."); }} const getData = async () => { try { const jsonValue = await AsyncStorage.getItem(x) console.log(jsonValue); return jsonValue != null ? JSON.parse(jsonValue) : null; } catch(e) { // error reading value console.log("error getdata"); }} return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.container}> {movie} {storeData}<Button onPress={storeData} title="Store items">Press me</Button><Button onPress={getData} title="get items">getdata</Button></View></TouchableWithoutFeedback> );}How can I store the movie on my screen?