In my code I am getting below array value and am populating these value on the basis of key in SectionList . All key value is coming proper in UI , but in my renderitem I am facing some problem .See below in second section I have explained more . Basically in render function I want to pass key value also
// below is array value
customerSearch:[
{
"key": "Customer",
"data": [
{
"name": "John",
"status": "Active",
"nationalId": "NBGVH6676",
"flag": "cus",
},
{ "name": "Abhi",
"status": "Active",
"nationalId": "NBGVH6890",
"flag": "cus"
}
]
},
{
"key": "Requests",
"data": [
{
"name": "Request 1",
"status": "Active",
"nationalId": "K0089"
},
{ "name": "Request 2",
"status": "Active",
"nationalId": "AS420"
}
]
},
{
"key": "Invoice",
"data": [
{
"name": "Invoice No 1",
"status": "Active",
"nationalId": "IN998"
},
{ "name": "Invoice No 2",
"status": "Active",
"nationalId": "ABh007"
}
]
},
]
// Here I am populating data inside the particular key Here in my I am getting that array which is there inside the key value . While I have to put some condition like in "Customer" key only I have to display Avatar .but here non of the key value is coming . Please help
renderItems = ({ item }) => (
<View>
{key==='Customer' ?
<View style={{ flex: 1, flexDirection: 'row', margin: 10,padding:5}}>
<Avatar avatarSize={50}
name={item.name}
isTouchable={false} />
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
{item.name}
</Text>
<Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 10 }}>
National Id : {item.id}
</Text>
{
item.status === 'Active' ?
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
width: 100,
paddingLeft:5
}}>
<View style={{
padding: 5,
backgroundColor: '#2CAC40',
borderRadius: 20,
height: 10,
width: 10,
marginTop: 4,
marginRight: 4,
}} />
<Text note
style={{ flex: 1, color: '#2CAC40', fontSize: hp('2.3%'), justifyContent: 'center' }}>
{item.status}
</Text>
</View> :
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
width: 100,
}}>
<View style={{
padding: 5,
backgroundColor: '#CC2828',
borderRadius: 20,
height: 10,
width: 10,
marginTop: 4,
marginRight: 4
}} />
<Text note style={{ flex: 1, color: '#CC2828', fontSize: hp('2.2%') }}>
{item.status}
</Text>
</View>
}
</View>
</View>:
<View style={{ flex: 1, flexDirection: 'row', margin: 5,padding:5}}>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
{item.name}
</Text>
<Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 5,paddingBottom:10 }}>
National Id : {item.nationId}
</Text>
<View style={{ width: '100%', height: '.5%', backgroundColor: 'black' }}></View>
</View>
</View>}
</View>
)
// Below code in the render function
<View style={{ marginLeft: 5, marginRight: 5, marginTop: 5, backgroundColor: '#fff' }}>
<SafeAreaView style={{ flex: 1, marginTop: 20 }}>
<SectionList
sections={globalSearchData}
keyExtractor={(item, index) => item + index}
renderSectionHeader={({ section }) => (
<RegularText text={`${section.key}`} textColor={parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].signatureHeadingColor : null} style={{ fontSize: hp('2.5%') ,paddingLeft:15}}/>
)}
renderItem={this.renderItems}
/>
</SafeAreaView>
</View>
Example UI display
Customer
Name
Status
National ID
Name Status
National ID
Request
Name Status
National ID
Name Status
National ID
Thanks
In your renderItems method you need to destructure the section as well. Then you can access the key with section.key.
Code:
renderItems = ({ item, section }) => (
const key = section.key;
// other Code ...
);