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.

CodePudding user response：

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 });
};