CODEWITHSUNDEEP
react-nativeredux
Markus Hayner
Markus Hayner

Reputation: 2959

how do I get the value of an item in FlatList?

I am trying to make a list of items where I get the value and then store it in redux to dispatch it later in DB. But everything works well and I just got stuck in getting the value of the selected item.

So here is my category list view:

<View style={{ flex: 1 }}>
        <ScrollView style={{ backgroundColor: '#ffffff', }}>
          <View style={{ flex: 1, flexDirection: 'column', marginTop: 65, margin: 40 }}>
            <Text style={{ fontSize: 40 }}>Job Category</Text>
            <FlatList
              style={{ marginTop: 20 }}
              data={this.state.jobCategory}
              renderItem={({ item }) => <ListItem data={item} value={item.value} />}
            />
          </View>
        </ScrollView>
        <TouchableHighlight onPress={handleSubmit(_categorySelected)} style={{ backgroundColor: 'white', padding: 20, alignItems: 'center' }} underlayColor="white">
          <Text style={{
            backgroundColor: 'black', color: 'white', fontSize: 20, fontWeight: 'bold',
            height: 50, width: 300, textAlign: 'center', padding: 14
          }}>NEXT</Text>
        </TouchableHighlight>
      </View>

and here is my ListItem view

constructor(props) {
        super(props);
        this.state = {
            selected: false,
            text: props.data.text,
            value: props.data.value
        };

        this.choosen = this.choosen.bind(this);
    }

    choosen(isSelected) {
        this.setState({
            selected: !isSelected,
        });
    }

    render() {
        let backgroundColor = this.state.selected ? "#000000" : "#ffffff";
        let fontColor = this.state.selected ? "#ffffff" : "#000000";
        return (
            <TouchableHighlight selected={this.state.selected} onPress={() => this.choosen(this.state.selected)} underlayColor="black">
                <View style={{backgroundColor: backgroundColor, padding: 20 }}>
                    <Text style={{color: fontColor, fontSize: 20 }}>{this.props.data.text}</Text>
                </View>
            </TouchableHighlight>
        );
    }

Now I guess I need a tag or something for my ListItem where I get the value of the item selected. Does anyone has an idea?

Upvotes: 1

Views: 904

Answers (1)

dentemm
dentemm

Reputation: 6379

If I understand correctly you want the Category List View to store the value of the last selected list item?

The best approach would be to lift the state up. This is how you would do it:

  1. Remove the selected state from for list item component, it will be passed to that component as prop. You can also remove the choosen() method
  2. Add a selectedItem property to the state of your list component
  3. Add a method to the list component to update the selectedItem state
  4. In the renderItem prop of FlatList you check if the current item is equal to the selectedItem, and pass a selected prop to list item which is the result of that check
  5. You pass a function as prop to the list item component which you attach to the onPress handler of TouchableHighlight. This function need to be linked to your selectedItem updater method of the list component

Upvotes: 1

Related Questions