Undefined result after passing to the next screen using random function - react-native

Question

I am having trouble on a undefined value I get after passing from one screen (Home) to another screen (SubScreen2) after randomizing the value in a drop down picker
Home
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { auth } from '../firebase'
import { useNavigation } from '#react-navigation/core'
import { signOut } from 'firebase/auth'
import DropDownPicker from 'react-native-dropdown-picker'
import { useEffect, useState } from 'react'
const HomeScreen = () => {
const navigation = useNavigation()
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{label: 'Fast Food', value: 'Fast Food'},
{label: 'Western', value: 'Western'},
{label:'Beverage', value:'Berverage'},
{label:'Chinese', value:'Chinese'},
{label: 'Korean', value: 'Korean'},
{label: 'Taiwanese', value: 'Taiwanese'},
{label: 'Malay', value: 'Malay'},
{label: 'Indonesian', value: 'Indonesian'},
{label: 'Indian', value: 'Indian'},
{label: 'Vietnamese', value: 'Vietnamese'},
{label: 'Japanese', value: 'Japanese'},
{label: 'Italian', value: 'Italian'},
{label: 'Desserts', value: 'Desserts'},
{label: 'Others', value: 'Others'},
]);
const handleSignOut = async () =>{
try{
await signOut(auth)
console.log("Signed out successfully")
navigation.replace("Login")
}catch (error) {
console.log({error});
}
}
const setRandomValue = () => {
const randomIndex = Math.floor(Math.random() * items.length);
const randomValue = setValue([items[randomIndex].label.toLowerCase()]);
console.log(randomIndex)
console.log(randomValue)
navigation.navigate("SubScreen2", {paramKey:randomValue})
}
return (
<View style = {styles.container}>
<Text>Welcome {auth.currentUser?.email}</Text>
<Text></Text>
<Text>What cusine would you like to eat today?</Text>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<TouchableOpacity
onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
style = {styles.button}
>
<Text style = {styles.buttonText}>Search</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={setRandomValue}
style = {styles.button}
>
<Text style = {styles.buttonText}>Random</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSignOut}
style = {styles.button}
>
<Text style = {styles.buttonText}>Sign Out</Text>
</TouchableOpacity>
</View>
)
}
export default HomeScreen
SubScreen2
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const SubScreen2 = ({route}) => {
const paramKey = route.params.paramKey
console.log(paramKey)
return (
<View>
<Text>{paramKey}</Text>
</View>
)
}
export default SubScreen2
const styles = StyleSheet.create({})
Under the function of setRandomValue in my Home, I have 2 variables which are randomIndex and randomValue. I can get a numeric output from randomIndex but a undefined output from randomValue. From here I pass the value to the next page (SubScreen2) via paramKey. The output I get is undefined here as in the previous page the output was undefined. So here is the question, what am I doing something wrong here? I am trying to randomize the value and move it to the next page so then I can continue using the value and search thru firebase database to extract the data I need. Example, Lets say the computer decides to pick Japanese, this Japanese will be passed to the 2nd page (SubScreen2) and within SubScreen2, Japanese will be used to search thru the firebase database to extract Japanese related and display on the page.

Answer 1

The problem is that you're assigning the setValue setState function to the randomValue instead of the actual value.
const setRandomValue = () => {
const randomIndex = Math.floor(Math.random() * items.length);
const randomValue = items[randomIndex].label.toLowerCase(); // only assigning the label
setValue(randomValue);
console.log(randomIndex);
console.log(randomValue);
navigation.navigate("SubScreen2", { paramKey: randomValue });
};