React Native, State Changes, but JSX Conditional Rendering Does not Updated UI

Krow Caw 0
Viewed 26

Hello and thank you for your time in advance!

I am struggling with a small issue that I have not encountered before, with React not rendering an UI element based on a check function. Basically, what I am trying to make, is a multiple selection filter menu, where when an option is clicked, the dot next to it changes to red.

For this purpose I append the value of each option to an array, and using array.sort, verify when it is to be added (value is pushed to FilterList) and removed (value is popped from FilterList)

The checkfilter function operates normally, and when logging the state, indeed it works as intended with the array being updated.

However, the JSX code running the checkfilter to render the extra red dot inside the bigger circle, unfortunately does not.

Additionally, when the screen is refreshed, the UI is updated normally, with every option clicked, now showing the aforementioned red dot.

Why is this happening? I have tried several hooks, JSX approaches, using imported components and more that I can't even remember, yet the UI will not update oddly.

Below you can find a snippet of the code. Please bear in mind this is a render function for a flatlist component

    const checkFilter = useCallback((element) => {
    return filterList?.some((el: any) => (el == element))
}, [filterList])
const removeFilter = useCallback((cat) => {
    let temparr = filterList
    var index = temparr?.indexOf(cat);
    if (index > -1) {
        temparr?.splice(index, 1);
    }
    setFilterList(temparr)
}, [filterList])
const addFilter = useCallback((cat) => {
    let temparr = filterList;
    temparr.push(cat);
    setFilterList(temparr)
}, [filterList])

const renderFilter = useCallback((item) => {
    return (

        <Pressable
            onPress={() => {
                checkFilter(item?.item) ? removeFilter(item?.item) : addFilter(item?.item);
                console.log(filterList)
            }}
            style={styles.modalOptionWrapper}
        >
            <Text style={styles.modalOptionTitle(checkFilter)}>{item?.item}</Text>
            <View style={styles.modalOptionRowRight}>
                <View style={styles.radioBtn}>
                    {checkFilter(item?.item) ?
                        <View style={styles.radioBtnBullet} />
                        :
                        null
                    }
                </View>
            </View>

        </Pressable>

    )
}, [filterList])
jsx react-native reactjs javascript
1 Answers

This may not be correct answer but try this. When I say simple basic codes, like this.

const ListItems = () => {
  const [filterList, setFilterList] = React.useState([]); // must be array

  const checkFilter = filterList?.some((el) => el === element);
  const removeFilter = useCallback(
    (cat) => {
      // not updating new state, just useing previous state
      setFilterList((prev) => [...prev].filter((el) => el !== cat));
      // used spread iterator
    },
    [] // no need dependency
  );
  const addFilter = useCallback((cat) => {
    // used spread indicator
    setFilterList((prev) => [...prev, cat]);
  }, []);

  const renderFilter = useCallback((item) => {
    // just checking our codes is right with basic elements
    // it may be 'undefined'
    return <Text>{JSON.stringify(item)}</Text>;
  }, []);

  return filterList.map(renderFilter);
};
user6ev610
Related