Access section data from section items in react native SectionList - react-native

Question

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

Answer 1

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,
}
});

Answer 2

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>
);
};