How do I pass a string to React Native function? - react-native

Question

I have three buttons which should pass a string value to a function that sorts the movies I have in my app based on the word (it starts a query).
const HomeScreen = () => {
const navigation = useNavigation();
const [movies, setMovies] = useState({});
useEffect(() => {
getMovies();
},[])
useEffect(() => {
getMoviesFiltered();
},[])
const [filter, setFilter] = useState('');
const getMoviesFiltered = async (filter) =>{
const querySnapshot = await getDocs(query(collection(db, "movies"), orderBy(filter)));
setMovies(querySnapshot.docs);
}
const getMovies = async () =>{
const querySnapshot = await getDocs(query(collection(db, "movies"), orderBy('name')));
setMovies(querySnapshot.docs);
}
return (
<View>
<View>
<TouchableOpacity onPress = {() => {setFilter('name')}}>
<Text>Title</Text>
</TouchableOpacity>
<TouchableOpacity onPress = {() => {setFilter('runtime')}}>
<Text>Runtime</Text>
</TouchableOpacity>
<TouchableOpacity onPress = {() => {setFilter('year')}}>
<Text>Year</Text>
</TouchableOpacity>
</View>
</View>
<FlatList
data = {movies}
renderItem = {({item}) => (
<TouchableOpacity onPress={() => navigation.navigate('Modal', item.data())}>
<Image source={{uri: item.data().pic}}/>
</TouchableOpacity>
)
}
/>
</View>
)
}
export default HomeScreen
I can see that it updates the filter value when I press the button twice (I've read that setState is an asynchronous operation, so I get why that happens), but I'm not sure how to properly pass that string into the getMovies1 function.
Could someone please help me out?

Answer 1

It looks like you are trying to pass the filter state value to the getMoviesFiltered function when it is called. However, you are not passing any arguments to the getMoviesFiltered function when you call it in the TouchableOpacity onPress event handlers.
To fix this, you can pass the filter state value as an argument to the getMoviesFiltered function in the onPress event handlers like this:
<TouchableOpacity onPress = {() => {setFilter('name');
getMoviesFiltered(filter)}}>
<Text>Title</Text>
</TouchableOpacity>
<TouchableOpacity onPress = {() => {setFilter('runtime');
getMoviesFiltered(filter)}}>
<Text>Runtime</Text>
</TouchableOpacity>
<TouchableOpacity onPress = {() => {setFilter('year');
getMoviesFiltered(filter)}}>
<Text>Year</Text>
</TouchableOpacity>
You may also want to consider moving the useEffect hook that calls getMoviesFiltered to depend on the filter state value. This will ensure that getMoviesFiltered is only called when the filter state value changes. You can do this like this:
useEffect(() => {
getMoviesFiltered(filter);
},[filter])