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

react native flatlist value doesn't get updated /re-rendered

I have a flatlist where it gets the itemCount from another page, I increment it with a button, its value changes but won’t be seen on the screen without pressing ctrl-s or going to another page and return.

<FlatList 
extraData={store}
data={store}
renderItem={({ item }) => {
  return (
      <View style={styles.itemCountView}>
        <TouchableOpacity style={styles.up}
          onPress={() => item.itemCount++}>
          <MaterialIcons name="arrow-drop-up" size={36} color="#ddd"/>
        </TouchableOpacity>
        <Text style={styles.itemCountText}>{item.itemCount}</Text>
      </View>
  )
}}/>

am I missing something? Maybe using the extraData the wrong way?

any type of help is appreciated

Tags:

3

Answers


  1. 0

    to re-render the flat list you have to pass the variable in extraData which is changing its value.

    extraData prop – It re renders the flat list when the given variable changes its value.

    You can also manage with state variable like eg below : –

        const [refreshList, setRefreshList] = useState(false);

    setRefreshList(true);                // set this true where you need

    <FlatList
      data={item.punch_list_inspection}
      style={style.content}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      extraData={refreshList}                  //pass variable here.
      ItemSeparatorComponent={FlatListItemSeparator}
    />
    Login or Signup to reply.
  2. 0

    You can map it like below

    {data.map({ item, i }) => {
  return (
      <View style={styles.itemCountView} key={i}>
        <TouchableOpacity style={styles.up}
          onPress={() => item.itemCount++}>
          <MaterialIcons name="arrow-drop-up" size={36} color="#ddd"/>
        </TouchableOpacity>
        <Text style={styles.itemCountText}>{item.itemCount}</Text>
      </View>
  )
}}
    Login or Signup to reply.
  3. 0

    Just add keyExtractor to your Flatlist

    keyExtractor={(item, index) => index.toString()}

    and it should look like this

       <FlatList 
    extraData={store}
    data={store}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item }) => {
      return (
          <View style={styles.itemCountView}>
            <TouchableOpacity style={styles.up}
              onPress={() => item.itemCount++}>
              <MaterialIcons name="arrow-drop-up" size={36} color="#ddd"/>
            </TouchableOpacity>
            <Text style={styles.itemCountText}>{item.itemCount}</Text>
          </View>
      )
    }}/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search