Click here to Skip to main content
15,565,403 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Using react native, I wanted to pass cookBooks to another screen. I can confirm that cookBooks was updated inside useEffect. But when I pass it as a parameter to another screen, no data was passed.

TypeScript
interface IBook {
     userId?: string;
     referenceId: string;
     bookTitle: string;
     genre: string;
    }

    const userBooks = useGetBooksOnSnapshot(userId);
    const [cookBooks, setCookBooks] = useState<IBook>();

    useEffect(() => {
      if (!userBooks ) {
        return;
      }
      setCookBooks(
        userBooks.find((value: IBook ) => value.genre === 'Cookbook'),
      );
    }, [userBooks]);

    return (
      <Box>          
         <Button
           startIcon={<MaterialIcon name="edit" size={33} color="white" />}
           colorScheme="blue"
           style={styles.button}
           onPress={() =>
             navigation.navigate({
               name: 'EditBooks',
               params: { books: cookBooks },
             })
           }
         />
      </Box>
    );


Is there a way to make sure that the parameter passed is not empty or undefined?

What I have tried:

I tried adding console logs in order to track the values of cookBooks and the value was really set. I just can't figure out why when I pass it to another screen, the value is empty/undefined
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900