How to display array value in group wise in React Native

Question

Here In my code customerSearch is an array I am getting some value. Now I am trying to map this value in such way like if it display on UI ,it should be in group according to the key.

Like customer is a key inside that key there is array and two value is there, so first customer come and bellow that two array value and after that again next key and their values. Same for other key.

 customerSearch[
      {
        "key": "customer",
        "data": [
          {
            "name": "John",
            "status": "Active",
            "nationalId": "NBGVH6676"
          },
          { "name": "Abhi",
            "status": "Active",
            "nationalId": "NBGVH6890"}
        ]
      },
      {
        "key": "requests",
        "data": [
          {
            "name": "Kartik",
            "status": "Active",
            "nationalId": "K0089"
          },
          { "name": "Ashi",
            "status": "Active",
            "nationalId": "AS420"

          }
        ]
      },
      {
        "key": "invoice",
        "data": [
          {
            "name": "John",
            "status": "Active",
            "nationalId": "IN998"
          },
          { "name": "Abhi2",
            "status": "Active",
            "nationalId": "ABh007"

          }
        ]
      },
      {
        "key": "offering",
        "data": [
          {},
          {}
        ]
      }
    ]

Below code in render function

 <View style={{ marginLeft: 5, marginRight: 5, marginTop: 10, backgroundColor: '#f1f1f1' }}>
            {this.props.customerSearch.map(
              (data, index) => {
                return (
                  <View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5 }} key={index}>
                    <Card>
                      <CardItem header style={{ backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
                          <View>
                            <RegularText text={`${data.key}`} style={{ fontWeight: 'bold', flexWrap: 'wrap' }} />
                            <SmallText text={` Name ${""}`} textColor="grey" />
                            <SmallText text={` Status ${""}`} textColor="grey" />
                            <SmallText text={` NationalId ${""}`} textColor="grey" />
                          </View>
                        </View>

                      </CardItem>

                    </Card>
                  </View>
                );
              })
            }
          </View>

Example UI display
Customer
Name
Status
National ID
Name Status
National ID

Request
Name Status
National ID
Name Status
National ID

SDushan · Accepted Answer · 2020-03-19 07:29:02Z

1

You can achieve your layout using React Native SectionList as below,

import React, { Component } from 'react';
import { SectionList, Text, View, SafeAreaView } from 'react-native';

const customerSearch = [
  {
    "key": "customer",
    "data": [
      {
        "name": "John",
        "status": "Active",
        "nationalId": "NBGVH6676"
      },
      {
        "name": "Abhi",
        "status": "Active",
        "nationalId": "NBGVH6890"
      }
    ]
  },
  {
    "key": "requests",
    "data": [
      {
        "name": "Kartik",
        "status": "Active",
        "nationalId": "K0089"
      },
      {
        "name": "Ashi",
        "status": "Active",
        "nationalId": "AS420"

      }
    ]
  },
  {
    "key": "invoice",
    "data": [
      {
        "name": "John",
        "status": "Active",
        "nationalId": "IN998"
      },
      {
        "name": "Abhi2",
        "status": "Active",
        "nationalId": "ABh007"

      }
    ]
  },
  {
    "key": "offering",
    "data": [
      {},
      {}
    ]
  }
]


export default class Example extends Component {

  renderItems = ({ item }) => (
    <View style={{padding: 5}}>
      <Text>{`Name - ${item.name}`}</Text>
      <Text>{`Status - ${item.status}`}</Text>
      <Text>{`NationalId - ${item.nationalId}`}</Text>
    </View>
  )

  render() {
    return (
      <SafeAreaView style={{ flex: 1, marginTop: 20 }}>
        <SectionList
          sections={customerSearch}
          keyExtractor={(item, index) => item + index}
          renderSectionHeader={({ section }) => (
            <Text style={{ fontSize: 20, backgroundColor: 'gray' }}>{section.key}</Text>
          )}
          renderItem={this.renderItems}
        />
      </SafeAreaView>
    );
  }
}

Change this according to your requirement.

Hope this helps you. Feel free for doubts.

answered Mar 19, 2020 at 7:29

SDushan

4,6512 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhigyan Gaurav Over a year ago

if I have to get customerSearch array value in renderItems ,then what approch I should floow , I need all key in renderItems fucntion .Please suggest

SDushan Over a year ago

renderItems = ({ item, section }) => {} then you can access key as section.key

Abhigyan Gaurav Over a year ago

Now I want to make all keys value is card , Now if am using card then all partuclular valie is coming in different card , while I have to disply in .. like if customer key's all value in one card and request all value is 2 then it should come in one card like for all

Collectives™ on Stack Overflow

How to display array value in group wise in React Native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related