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.
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