How can I use a state in a FlatList?

Question

I have a FlatList and I want to show a number like quantity of product. So I use a state for that. Now when I press on TouchableOpacity to change quantity to 1 working fine in console, but I can't see any change in FlatList.

  constructor(props){
    super(props);
    this.state={
      quantity : 0,
    }

Increment quantity:

incrementCount=()=>{

    if(this.state.quantity != 10){
      console.log(this.state.quantity);
     this.setState((prevState, props) => ({
        quantity: this.state.quantity + 1,
      }));
    }
}

FlatList:

<FlatList
          data={this.state.dataSource}
          renderItem={({item}) =>

          <View>
            <Text>{item.title}</Text>

            <Text>{this.state.quantity}</Text>                            
            <TouchableOpacity onPress={this.incrementCount} activeOpacity={0.5}>
               <AntDesign name="plus" size={15}/>
            </TouchableOpacity>

          </View>
      }
    />

there is no `this.state.dataSource` in your state, the data of the ListView is undefined — Vencovsky, Apr 25 '19 at 17:31
@Vencovsky Sorry.. I delete many codes... The problem is not about that. I think we cant change state when we use a state in listView. — alireza darvishi, Apr 25 '19 at 17:52
Maybe this will change something `this.setState((prevState, props) => ({ quantity: prevState.quantity + 1, }))` — Vencovsky, Apr 25 '19 at 17:55

score 0 · Answer 1 · answered Apr 25 '19 at 18:04

0

Listview is deprecated now use Flatlist instead of this.

Refer this official doc for more information react-native listview

answered Apr 25 '19 at 18:04

Ankit Dubey

243
3
11

I use flatList now and in not working in flatList ,too. – alireza darvishi Apr 26 '19 at 16:42

score 0 · Answer 2 · answered Apr 25 '19 at 18:07

This is the common problem about pre-increment vs post-increment in javascript (you can read more about this here: ++someVariable Vs. someVariable++ in Javascript )

You can solve this problem by simply incrementing the variable before the setState:

const quantity = this.state.quantity + 1;
this.setState({ quantity }) // this is ES6 syntax

Anyway, you should not use ListView because it's deprecated. ( https://facebook.github.io/react-native/docs/listview.html ) There are other components:

FlatList ( https://facebook.github.io/react-native/docs/flatlist )
SectionList ( https://facebook.github.io/react-native/docs/sectionlist )
VirtualizedList ( https://facebook.github.io/react-native/docs/virtualizedlist )

no different.. My code working fine but not in listView.. I think I should use other components.. — alireza darvishi, Apr 26 '19 at 09:09

How can I use a state in a FlatList?

2 Answers2