How to display a value back in parent component in react native? - reactjs

Question

I have a page which shows list of coins.
From there I navigated to another component and passing the coin name as param.
From the second page, I have filtered all the orders based on the coin name received in params.Here, I calculated the average value. How to pass this back to parent page so that I can see the average value of orders beside each coin?
//screen1 code:
import React, { useEffect, useState } from "react";
import {
FlatList,
Keyboard,
Text,
TextInput,
TouchableOpacity,
View,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
import { SwipeListView } from "react-native-swipe-list-view";
import styles from "./styles";
import { firebase } from "../../firebase/config";
export default function CoinCreate(props) {
const [coinText, setCoinText] = useState("");
const [coins, setCoins] = useState([]);
const coinRef = firebase.firestore().collection("coins");
const userID = props.extraData.id;
useEffect(() => {
coinRef
.where("authorID", "==", userID)
.orderBy("createdAt", "desc")
.onSnapshot(
(querySnapshot) => {
const newCoins = [];
querySnapshot.forEach((doc) => {
const coin = doc.data();
coin.id = doc.id;
newCoins.push(coin);
});
setCoins(newCoins);
},
(error) => {
console.log(error);
}
);
}, []);
const onAddButtonPress = () => {
if (coinText && coinText.length > 0) {
const timestamp = firebase.firestore.FieldValue.serverTimestamp();
const data = {
text: coinText,
authorID: userID,
createdAt: timestamp,
};
coinRef
.add(data)
.then((_doc) => {
setCoinText("");
Keyboard.dismiss();
})
.catch((error) => {
alert(error);
});
}
};
const renderCoin = ({ item, index }) => {
return (
<View style={styles1.rowFront}>
<TouchableWithoutFeedback
onPress={() =>
props.navigation.navigate("Orders", {
coin: item.text,
userID: userID,
})
}
>
<Text>
{index}. {item.text}
</Text>
</TouchableWithoutFeedback>
</View>
);
};
return (
<View style={styles.container}>
<View style={styles.formContainer}>
<TextInput
style={styles.input}
placeholder="Add new coin"
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setCoinText(text)}
value={coinText}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
<Text style={styles.buttonText}>Add</Text>
</TouchableOpacity>
</View>
{coins && (
<SwipeListView
data={coins}
keyExtractor={(item) => item.id}
renderItem={renderCoin}
removeClippedSubviews={true}
/>
)}
</View>
);
}
const styles1 = StyleSheet.create({
rowFront: {
alignItems: "center",
backgroundColor: "#FFF",
borderBottomWidth: 0.25,
justifyContent: "center",
height: 50,
},
rowBack: {
alignItems: "center",
backgroundColor: "#DDD",
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
paddingLeft: 15,
},
backRightBtn: {
alignItems: "center",
bottom: 0,
justifyContent: "center",
position: "absolute",
top: 0,
width: 75,
backgroundColor: "red",
right: 0,
},
});
//screen2 code:
import React, { useEffect, useState } from "react";
import {
FlatList,
Keyboard,
Text,
TextInput,
TouchableOpacity,
View,
StyleSheet,
} from "react-native";
import { Avatar, Button, Card, Title, Paragraph } from "react-native-paper";
import { SwipeListView } from "react-native-swipe-list-view";
import styles from "./styles";
import { firebase } from "../../firebase/config";
import { Icon } from "react-native-elements";
import { createIconSetFromFontello } from "#expo/vector-icons";
export default function OrderList(props) {
const LeftContent = (props) => <Avatar.Icon {...props} icon="folder" />;
const [orderText, setOrderText] = useState("");
const [orders, setOrders] = useState([]);
const orderRef = firebase.firestore().collection("orders");
const userID = props.route.params.userID;
const coin = props.route.params.coin;
//averageValue = (totalCost / totalCount).toString();
const [averageValue, setAverageValue] = useState("");
useEffect(() => {
orderRef
.where("authorID", "==", userID)
.where("name", "==", coin)
.orderBy("createdAt")
.onSnapshot(
(querySnapshot) => {
const newOrders = [];
querySnapshot.forEach((doc) => {
const order = doc.data();
order.id = doc.id;
newOrders.push(order);
});
setOrders(newOrders);
},
(error) => {
console.log(error);
}
);
}, []);
useEffect(() => {
//calculate and set anything like totalCost, averageValue, etc here
console.log("---came to orders effect---");
//console.log(orders);
let totalCost = 0;
let totalCount = 0;
orders.forEach((item, index) => {
console.log(item);
console.log(index);
totalCost += parseFloat(item.amount);
totalCount += parseFloat(item.count);
});
setAverageValue((totalCost / totalCount).toString());
}, [orders]);
/*
useEffect(() => {
let avg = (parseFloat(totalCost) / parseFloat(totalCount)).toString();
console.log("Avg:" + avg);
setAverageValue(avg);
}, [totalCount, totalCost]);
*/
const onAddButtonPress = () => {
props.navigation.navigate("CreateOrder", {
coin: coin,
userID: userID,
orderRef,
});
};
const renderOrder = ({ item, index }) => {
//console.log("----------------------");
//console.log(item.createdAt.toDate().toString());
//console.log("----------------------");
//setTotalCost(parseFloat(totalCost) + parseFloat(item.price));
//setTotalCount(parseFloat(totalCount) + parseFloat(item.count));
//totalCost = parseFloat(totalCost) + parseFloat(item.price);
//totalCount = parseFloat(totalCount) + parseFloat(item.count);
//console.log(totalCost);
//console.log(totalCount);
return (
<View style={styles1.rowFront}>
<Text>
{index}. {item.price} {item.amount} {item.count}
{"\n" + item.createdAt.toDate().toString()}
</Text>
<Icon name={"flight-takeoff"} />
</View>
);
};
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
<Text style={styles.buttonText}>Click here to create new order..</Text>
</TouchableOpacity>
{orders.length === 0 && (
<Text>Please order some coins in currency: {coin}</Text>
)}
{orders && orders.length > 0 && (
<>
<Text>Average Value: {averageValue}</Text>
<SwipeListView
data={orders}
keyExtractor={(item) => item.id}
renderItem={renderOrder}
removeClippedSubviews={true}
/>
</>
)}
</View>
);
}
const styles1 = StyleSheet.create({
rowFront: {
alignItems: "center",
backgroundColor: "#FFF",
borderBottomWidth: 0.25,
justifyContent: "center",
height: 50,
},
rowBack: {
alignItems: "center",
backgroundColor: "#DDD",
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
paddingLeft: 15,
},
backRightBtn: {
alignItems: "center",
bottom: 0,
justifyContent: "center",
position: "absolute",
top: 0,
width: 75,
backgroundColor: "red",
right: 0,
},
});
To simplify the process, I created a normal function(not react component) with orderListData(coin,userID) in a separate file and imported that and calling that function from the screen 1, but getting error as
TypeError: (0, _OrderListData.orderListData) is not a function. (In '(0, _OrderListData.orderListData)("ada", "nMOpBupcptZF8YlxiJYFX7vPMtC2")', '(0, _OrderListData.orderListData)' is undefined)
My code:
OrderListData.js
import { firebase } from "../../firebase/config";
export default function orderListData(coin, userID) {
let orders = [];
const orderRef = firebase.firestore().collection("orders");
//const userID = props.route.params.userID;
//const coin = props.route.params.coin;
let totalCost = 0;
let totalCount = 0;
let averagePrice = 0;
orderRef
.where("authorID", "==", userID)
.where("name", "==", coin)
.orderBy("createdAt")
.onSnapshot(
(querySnapshot) => {
querySnapshot.forEach((doc) => {
const order = doc.data();
order.id = doc.id;
orders.push(order);
});
},
(error) => {
console.log(error);
}
);
orders.forEach((item, index) => {
totalCost += parseFloat(item.amount);
totalCount += parseFloat(item.count);
});
averagePrice = totalCost / totalCount;
return {
averagePrice,
totalCost,
totalCount,
};
}
And the modified screen 1:
import React, { useEffect, useState } from "react";
import {
FlatList,
Keyboard,
Text,
TextInput,
TouchableOpacity,
View,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
import { SwipeListView } from "react-native-swipe-list-view";
import styles from "./styles";
import { firebase } from "../../firebase/config";
import { orderListData } from "./OrderListData";
export default function CoinCreate(props) {
console.log("testing");
console.log(orderListData("ada", "nMOpBupcptZF8YlxiJYFX7vPMtC2"));
const [coinText, setCoinText] = useState("");
const [coins, setCoins] = useState([]);
const coinRef = firebase.firestore().collection("coins");
const userID = props.extraData.id;
useEffect(() => {
coinRef
.where("authorID", "==", userID)
.orderBy("createdAt", "desc")
.onSnapshot(
(querySnapshot) => {
const newCoins = [];
querySnapshot.forEach((doc) => {
const coin = doc.data();
coin.id = doc.id;
newCoins.push(coin);
});
setCoins(newCoins);
},
(error) => {
console.log(error);
}
);
}, []);
const onAddButtonPress = () => {
if (coinText && coinText.length > 0) {
const timestamp = firebase.firestore.FieldValue.serverTimestamp();
const data = {
text: coinText,
authorID: userID,
createdAt: timestamp,
};
coinRef
.add(data)
.then((_doc) => {
setCoinText("");
Keyboard.dismiss();
})
.catch((error) => {
alert(error);
});
}
};
const renderCoin = ({ item, index }) => {
let { averagePrice, totalCost, totalCount } = orderListData(
item.text,
userID
);
return (
<View style={styles1.rowFront}>
<TouchableWithoutFeedback
onPress={() =>
props.navigation.navigate("Orders", {
coin: item.text,
userID: userID,
})
}
>
<Text>
{index}. {item.text} {averagePrice}
</Text>
</TouchableWithoutFeedback>
</View>
);
};
return (
<View style={styles.container}>
<View style={styles.formContainer}>
<TextInput
style={styles.input}
placeholder="Add new coin"
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setCoinText(text)}
value={coinText}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
<Text style={styles.buttonText}>Add</Text>
</TouchableOpacity>
</View>
{coins && (
<SwipeListView
data={coins}
keyExtractor={(item) => item.id}
renderItem={renderCoin}
removeClippedSubviews={true}
/>
)}
</View>
);
}
const styles1 = StyleSheet.create({
rowFront: {
alignItems: "center",
backgroundColor: "#FFF",
borderBottomWidth: 0.25,
justifyContent: "center",
height: 50,
},
rowBack: {
alignItems: "center",
backgroundColor: "#DDD",
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
paddingLeft: 15,
},
backRightBtn: {
alignItems: "center",
bottom: 0,
justifyContent: "center",
position: "absolute",
top: 0,
width: 75,
backgroundColor: "red",
right: 0,
},
});
Any suggestion on this please.

Answer 1

There are different ways to solve this problem,
Your requirement is to update one screen based on another screen, so you can think of using something state management for this but in your case you have the trigger of going back so use the functions of the navigation library to do that.
So I'll put a working example here using a simple scenario of sending an array
Let say that you have a home screen, from here we go to a CreateOrder screen and it will send data do this screen via navigation.navigate (navigate function will navigate to an existing screen or push a new screen so here you will be sent back).
function HomeScreen({ navigation, route }) {
React.useEffect(() => {
if (route.params?.orders) {
}
}, [route.params?.orders]);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Create post"
onPress={() => navigation.navigate('CreateOrder')}
/>
<Text style={{ margin: 10 }}>Post: {route.params?.orders?.length}</Text>
</View>
);
}
You can use the useEffect to update if the param is updated and use the route prop.
The second screen would override the back button and also have a button to navigate back. Here we send the orders array via navigation.navigate
function CreateOrdersScreen({ navigation, route }) {
const [orders, setOrders] = React.useState('');
React.useLayoutEffect(() => {
navigation.setOptions({
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
navigation.navigate('Home', { orders });
}}
/>
),
});
}, [navigation, orders]);
return (
<>
<Text>{orders.length}</Text>
<Button
title="Add"
onPress={() => {
setOrders([...orders, 1]);
}}
/>
<Button
title="Done"
onPress={() => {
// Pass and merge params back to home screen
navigation.navigate({
name: 'Home',
params: { orders },
merge: true,
});
}}
/>
</>
);
}
You can see a running example here
https://snack.expo.io/#guruparan/5b84d0
References
https://reactnavigation.org/docs/params/#passing-params-to-a-previous-screen
https://reactnavigation.org/docs/header-buttons/#overriding-the-back-button