Access section data from section items in react native SectionList

user_793635 0
Viewed 13451

I need to access the information regarding the section (index, value) inside the renderItem in react-native SectionList. According to http://docs.w3cub.com/react_native/sectionlist/#renderitem section details can be passed via renderItem function. But in below code except the item all other values will be set to undefined. Is there any other possible way of doing it?

    render(){
            return(
                <SectionList
                    sections={this.props.itemList}
                    renderItem={(item,section) => this._renderNewItem(item,section)}
                    renderSectionHeader={this._renderSectionHeader}
                    keyExtractor={(item) => item.id}
                />
            )
        }

_renderNewItem(item,section){
        console.log(item, "   ", section)
    }

Sample data structure

enter image description here

react-native
2 Answers

renderItem prop passes a single parameter to the function. This parameter is an object includes item and section data.

renderItem: (info: { item: Item, index: number, section: SectionT, separators: { highlight: () => void, unhighlight: () => void, updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, }, }) => ?React.Element

To get the section data you can use it like below

renderItem={({ item, section }) => this._renderNewItem(item,section)}

Update

Adding a sample example to demonstrate how it works. See it on snack.expo.io

import React, { Component } from 'react';
import { Text, View, StyleSheet, SectionList } from 'react-native';
import { Constants } from 'expo';
const data = [{key: 'New', data: [{name: 'Foo1'}, {name: 'Foo2'}]}, {key: 'Old', data: [{name:'Foo3'}, {name: 'Foo4'}]}];
export default class App extends Component {

  _renderItem = ({item, section}) => (<Text>{`${item.name}(${section.key})`}</Text>)

  _renderSectionHeader = ({section}) => {
      return (
        <View style={styles.sectionHeader}>
          <Text style={styles.header}>{section.key}</Text>
        </View>
      )
  }

  render() {
    return (
      <View style={styles.container}>
        <SectionList
            sections={data}
            renderItem={this._renderItem}
            renderSectionHeader={this._renderSectionHeader}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  sectionHeader: {
      height: 50,
      flex: 1,
      backgroundColor: '#fff',
      justifyContent: 'center',
      paddingLeft: 10
  },
  header: {
      fontSize: 20,
  }
});
user_23152800 
Output of this will look like attached image Link

https://i.stack.imgur.com/Y7CLF.png Output of this solution image.

https://pastebin.com/embed_js/7kYrk8kf Dummy JSON File URL Link for this Demo.

I used above mentioned JSON with Section List in following way with the help of @bennygenel code.

 renderItem = ({ item, section }) => <Text>{`${item.title}`}</Text>;


renderSectionHeader = ({ section }) => {

return (
  /*  <View style={styles.sectionHeader}>
    <Text style={styles.header}>{section.key}</Text>
  </View> */
 ****Custom Header Component ****
  <CellHeader title={section.title} />
);
 };

renderSectionList = () => {

return (
  <View>
    <SectionList
      sections={data1.results}
      renderItem={this.renderItem}
      renderSectionHeader={this.renderSectionHeader}
    />
  </View>
);

};

user_39057230
Related