First click not rendering correct data [second click works]?

Question

I have a menu here, made with a horizontal flatlist:

Code for menu:

<View style={{ position: 'absolute', left: 0, top: 0 }}>
    <FlatList
      horizontal
      data={categories}
      extraData={
      selectedCategory // for single item
    }
      style={styles.flatList}
      renderItem={({ item: rowData }) => (
        <TouchableOpacity
          onPress={() => recalculateCategory(rowData)} 
          style={rowData === selectedCategory ? styles.selected : styles.unselected}
        >
          <Text style={{ fontWeight: 'bold', color: '#FFFFFF', padding: 6 }}>
            { rowData }
          </Text>

        </TouchableOpacity>
      )}
      keyExtractor={(item, index) => item.toString()}
    />
  </View>

Code for recalculateCategory:

const recalculateCategory = (rowData) => {
  setSelectedCategory(rowData);
  getCollection();
};

code for getCollection:

const getCollection = async() => {
    setIsLoading(true);
    const index = 1;
    const getThoughtsOneCategory = Firebase.functions().httpsCallable('getThoughtsOneCategory');
    await getThoughtsOneCategory({
      index,
      category: selectedCategory,
    }).then((result) => {
      setThoughts(result.data);
      setIsLoading(false);
    }).catch((err) => {
      console.log(err);
    });
  };

How it works is: if you want to see options posts, you click options, and it renders the data accordingly.

I am running into an issue.

1. We are on "STOCKS"

2. Click on "OPTIONS" [Notice the data is the same as "STOCKS"]

3. Click on "OPTIONS" again, and we get the correct data

How can I fix this requirement to double click on a menu category? Thanks

Answer 1

Instead of calling getCollection directly, you could use useEffect to call it whenever the category changes.

Something like:

useEffect(() => {
  getCollection();
},[selectedCategory])

And then your recalculateCategory would just look like:

const recalculateCategory = (rowData) => {
  setSelectedCategory(rowData);
};

useEffect runs whenever the parameters in the second argument change. You may need to adjust them to fit your use case, but selectedCategory would definitely be in there.