how to calculate renderRow in react native - react-native

Question

I am trying to calculate renderRow in listView. actually i need to show index of the row with data. its working fine for subitems but not working for parent. i did like this-
render() {
return(
<ScrollView style={styles.drawer}>
<View style={styles.content} key={1}>
<ListView
dataSource={this.state.dataSource}
renderRow={(data) =>
<View>
<Text style={styles.navMenuTop}>
{'› '+data.Name}
</Text>
{data.SubItems.map((b,Index) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name+"=="+Index}</Text>
{b.SubItems != undefined && b.SubItems.map((c) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,c.cPath)}> {'»»»» '+c.Name}</Text>
</View>
)}
</View>
)}
</View>
}
/>
</View>
</ScrollView>
);
}
}
I want to show Index with data.Name . its working properly for b.Name and c.Name. how i can do this?

Answer 1

I believe that you can use rowId for your purpose (rowData, sectionID, rowID, highlightRow) => renderable please see, https://facebook.github.io/react-native/docs/listview.html
and maybe look at this example too: https://medium.com/differential/react-native-basics-how-to-use-the-listview-component-a0ec44cf1fe8
Hope this helps.

Answer 2

Ranjeet,
You can visit https://facebook.github.io/react-native/docs/listview.html#renderrow
in your case,
In renderRow callback you receive 4 parameters (rowData, sectionID, rowID)
so just pass rowID to your UI function like this way
_renderRow(rowData, sectionID, rowID){
//use this rowID to show Index with data.Name
return <View>
<Text style={styles.navMenuTop}>
{'› ' + rowData.Name}
</Text>
{rowData.SubItems.map((b, Index) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this, b.cPath)}> {'» ' + b.Name + "==" + Index}</Text>
{b.SubItems != undefined && b.SubItems.map((c) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this, c.cPath)}> {'»»»» ' + c.Name}</Text>
</View>
)}
</View>
)}
</View>
}
render() {
parentIndex = 0;
return (
<ScrollView style={styles.drawer}>
<View style={styles.content} key={1}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}
/>
</View>
</ScrollView>
);
}

Answer 3

I did this like:
render() {
return(
<ScrollView style={styles.drawer}>
<View style={styles.content} key={1}>
<ListView
dataSource={this.state.dataSource}
renderRow={((data,sectionID:number,rowID:number) =>
<View>
<Text style={styles.navMenuTop}>
{'› '+data.Name+rowID}
</Text>
{data.SubItems.map((b,Index) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,b.cPath)}> {'» '+b.Name+"=="+Index}</Text>
{b.SubItems != undefined && b.SubItems.map((c) =>
<View>
<Text style={styles.navMenu} onPress={this.handlePressCatid.bind(this,c.cPath)}> {'»»»» '+c.Name}</Text>
</View>
)}
</View>
)}
</View>
}
/>
</View>
</ScrollView>
);
}
}