2

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?

Junior
  • 147
  • 4
  • 12

1 Answers1

0

Try it

 interface IBook {
     userId?: string;
     referenceId: string;
     bookTitle: string;
     genre: string;
    }
    
    const [cookBooks, setCookBooks] = useState<IBook>();
    
    useEffect(() => {
          const userBooks = useGetBooksOnSnapshot(userId);
          if(!!userBooks){ 
           setCookBooks(userBooks.find((value: IBook ) => value.genre === 'Cookbook')
          }
          
    }, [])
    
    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>
    );
Aroldo Goulart
  • 134
  • 1
  • 11
  • Thank you but unfortunately this solution doesn't fix my problem. Also, double negation and empty dependency does not pass eslint – Junior Sep 30 '21 at 06:11