Question 32939 in React native Question posted in
The official React Native documentation can be found here.

React native – state does not get updated inside renderItem function in SwipListView

As explained stateItem throws an error, and when I console.log stateItem after I set the state it comes out as null. Can someone please tell me why this happens? The code is below:

const [stateItem, setStateItem] = useState(null);
     <SwipeListView
              data={list}
              listKey={'list'}
              keyExtractor={list=> list.id}
              closeOnScroll={true}
              closeOnRowBeginSwipe={true}
              renderItem={({ item }) => (
                <View>
                  <TouchableWithoutFeedback
                    onPress={() => {
                    setStateItem(item);
                  >
                    <View>
                    <Text>{stateItem.category}</Text>
                    </View>
                  </TouchableWithoutFeedback>
                </View>
              )}
            />
Tags:

2

Answers


  1. 0

    Try :

    const [stateItem, setStateItem] = useState(null);

const Item = ({item , setStateItem}) => (
  <TouchableWithoutFeedback 
onPress={() => {
 setStateItem(item);
} //<----- 
>
    ...
  </TouchableWithoutFeedback>
);

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
      ...
        renderItem={({item}) => <Item item={item} ,setStateItem={setStateItem} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};
    Login or Signup to reply.
  2. 0

    tested working solution:

    1. You messed up with curly braces in <TouchableWithoutFeedback /> component
    2. As strange as it sounds, TouchableWithoutFeedback did not work for me at all. I had to replace it with <Pressable /> which i recommend to use at first place anyway.

    Working example:

        <FlatList
            data={list}
            listKey={"list"}
            keyExtractor={(list) => list.id}
            renderItem={({item, index}) => (
              <View>
                <Pressable onPress={() => setStateItem(item)}>
                  <>
                    <View style={{marginVertical: 16}}>
                      <Text>
                        {item.value} {index}
                      </Text>
                    </View>
                  </>
                </Pressable>
                <View style={{marginVertical: 16, backgroundColor: "chocolate"}}>
                  <Text>{stateItem?.value ? stateItem.value : ""}</Text>
                </View>
              </View>
            )}
              />

    In case you HAVE TO use SwipeListView, according to documentation, check following:

    If your row is touchable (TouchableOpacity, TouchableHighlight, etc.) with an onPress function make sure renderItem returns the Touchable as the topmost element.

    GOOD:

    renderItem={ data => (
    <TouchableHighlight onPress={this.doSomething.bind(this)}>
        <View>
            <Text>I am {data.item} in a SwipeListView</Text>
        </View>
    </TouchableHighlight>
)}

    BAD:

    renderItem={ data => (
    <View>
        <TouchableHighlight onPress={this.doSomething.bind(this)}>
            <Text>I am {data.item} in a SwipeListView</Text>
        </TouchableHighlight>
    </View>
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search