CODEWITHSUNDEEP
javascriptreact-nativereact-native-sectionlist
n4zg
n4zg

Reputation: 397

Get index of SectionList Item React-Native

I'm having problems getting the index of an header item from SectionList React-Native. By pressing the header, I am trying to get the index of the item and then passing this to a function. I have tried many things but had no luck. Any suggestions. Thanks

enter image description here

I want to press 3-30pm to return index 0 i can press Lucian which returns me 0 The idea is by getting me the header index, i can use with an array to delete an item from the list.

            <SectionList style = {styles.itemSquare}

        renderItem = {({item, index, section}) =>
            < Text style={styles.SectionListItemStyle} key = {index}
            onPress={this.GetSectionListItem.bind(this, this.state.slotkeys[index])}> {item}
            < /Text>}

            renderSectionHeader = {({section: {title}, index}) => (
                  <TouchableHighlight >
                    <View>
                      <Text style={styles.SectionHeaderStyle}
                      onPress={this.GetSectionListItem.bind(this, index)}
                      > {title}
                      <Text style={styles.SectionHeaderCancel} > {index} < /Text>
                      </Text>
                    </View>
                  </TouchableHighlight>
                )
            }

          sections = {this.state.slots.map(({ time, chosen_user, name, chosen_syllabud, user_id }) =>
          ({ title: time, data: [[chosen_user], [chosen_syllabud], [user_id]], index:1 }))}

          keyExtractor = {(item, index) => item + index}
          />

Upvotes: 1

Views: 4362

Answers (1)

Andre Knob
Andre Knob

Reputation: 831

The renderSectionHeader prop does not receive an index as argument when called, but you can fix your sections prop to properly pass an index through map:

  sections = {this.state.slots.map(({ time, chosen_user, name, chosen_syllabud, user_id }, index) =>
      ({ title: time, data: [[chosen_user], [chosen_syllabud], [user_id]], index }))}

and then on your renderSectionHeader you can access the index inside the section:

renderSectionHeader = {({section: {title, index}}) => (
              <TouchableHighlight >
                <View>
                  <Text style={styles.SectionHeaderStyle}
                  onPress={this.GetSectionListItem.bind(this, index)}
                  > {title}
                  <Text style={styles.SectionHeaderCancel} > {index} < /Text>
                  </Text>
                </View>
              </TouchableHighlight>
            )
        }

Upvotes: 5

Related Questions