How to populate value of array on ui according to key in SectionList

Question

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

Answer 1

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