react native how to update items in array for inverted flatlist-CodePudding

Here is my code

 response.data.data.map((item, index) => {
                console.log('response',item);
                const itemIndex = dataList.findIndex(v => v.dt3 === item.dt3);
                if (itemIndex > -1) {
                  //update quantity in list if same item is selected more than one time
                  const value = {
                    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
                  };
                  dataList.push(value);
                } else {
                  const value = {
                    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
                  };
                  dataList.push(item.dt3);
                  for(let i = 0; i<dataList.length; i  ){
                    dataList[i] = value;
                  }             
                }
              });

//Expected output

 const DATA = [
    {
    title: '4th April, 2020',
    data: [
      {
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    },{
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    }
     ],
    },
    {
    title: '3rd April, 2020',
    data: [
    {
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    },{
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    }
     ],
    },
    {
    title: '2nd April, 2020',
    data: [
    {
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    },{
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    }
     ],
    },
    {
    title: '1st April, 2020',
    data: [
     {
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    },{
    ds: item.ds,
                    bl: item.bl,
                    mty: item.od_auto.Mty,
                    name: item.customer_name_auto,
    }
     ],
    },
    ];

This is how my api response looks

{
    "status": 1,
    "data": [
        {
            "aid": 188427,
            "s": 1,
            "dt": "19th Oct 2022",
            "dt3": "19-10-2022",
            "ds": "Proceeds",
            "cr": 172,
            "bk": "sdlsjkfhjdfhgf",
            "bkid": 1,
            "up": "",
            "od": {
                "Mty": "",
                "Mre": "",
                "Mct": "",
                "Mci": "",
                "Mdt": "",
                "Mdi": ""
            },
            "typ": "",
            "cnm": "",
            "tm": "19th Oct 2022 19:31",
            "bl": "224",
            "od_auto": {
                "Mty": "Services",
                "Mci": 77,
                "Mct": 2,
                "Mre": "",
                "Mdt": "",
                "Mdi": ""
            },
            "customer_name_auto": null
        },
        {
            "aid": 188426,
            "s": 2,
            "dt": "19th Oct 2022",
            "dt3": "19-10-2022",
            "ds": "cslkdjfhsjkdfhjshfjs",
            "cr": 1.01,
            "bk": "slkdjfhsjkdfhljdfh",
            "bkid": 397,
            "up": "",
            "od": {
                "Mty": "",
                "Mre": "",
                "Mct": "",
                "Mci": "",
                "Mdt": "",
                "Mdi": ""
            },
            "typ": "",
            "cnm": "",
            "tm": "19th Oct 2022 18:07",
            "bl": "2487.22",
            "od_auto": {
                "Mty": "djfdfhghgh",
                "Mci": 181,
                "Mct": 1,
                "Mre": "",
                "Mdt": "",
                "Mdi": ""
            },
            "customer_name_auto": "skdhfshdghsd"
        },
]}

I fetching response from Api to create Inverted flatlist. In my response array i have date object for each item in the array. Now i want to group the items which has same date in an array.Please help me to arrange the array items

CodePudding user response：

if you want to group your array of objects based on the date attribute then you can use this function

const data_array  = {
    "status": 1,
    "data": [
        {
            "aid": 188427,
            "s": 1,
            "dt": "19th Oct 2022",
            "dt3": "19-10-2022",
            "ds": "Proceeds",
            "cr": 172,
            "bk": "sdlsjkfhjdfhgf",
            "bkid": 1,
            "up": "",
            "od": {
                "Mty": "",
                "Mre": "",
                "Mct": "",
                "Mci": "",
                "Mdt": "",
                "Mdi": ""
            },
            "typ": "",
            "cnm": "",
            "tm": "19th Oct 2022 19:31",
            "bl": "224",
            "od_auto": {
                "Mty": "Services",
                "Mci": 77,
                "Mct": 2,
                "Mre": "",
                "Mdt": "",
                "Mdi": ""
            },
            "customer_name_auto": null
        },
        {
            "aid": 188426,
            "s": 2,
            "dt": "19th Oct 2022",
            "dt3": "19-10-2022",
            "ds": "cslkdjfhsjkdfhjshfjs",
            "cr": 1.01,
            "bk": "slkdjfhsjkdfhljdfh",
            "bkid": 397,
            "up": "",
            "od": {
                "Mty": "",
                "Mre": "",
                "Mct": "",
                "Mci": "",
                "Mdt": "",
                "Mdi": ""
            },
            "typ": "",
            "cnm": "",
            "tm": "19th Oct 2022 18:07",
            "bl": "2487.22",
            "od_auto": {
                "Mty": "djfdfhghgh",
                "Mci": 181,
                "Mct": 1,
                "Mre": "",
                "Mdt": "",
                "Mdi": ""
            },
            "customer_name_auto": "skdhfshdghsd"
        },
]}


var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

console.log(groupBy(data_array.data, 'dt3'));

let data_group_by_date = groupBy(data_array.data, 'dt3') you can group your array with any object attribute

you can u section list data with the this code

const sections_list_data = []; Object.keys(data_group_by_date).map((item, i) => { sections.push({ title: item, data: data_group_by_date[item], }); });

CodePudding user response：

Add this Modules> Modify it a little bit.

import React, {useCallback, useEffect, useState} from 'react';
import {
  ActivityIndicator,
  SectionList,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import Modal from 'react-native-modal';
import {RFValue} from 'react-native-responsive-fontsize';
import Entypo from 'react-native-vector-icons/Entypo';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {hp, wp} from '../constants/scaling';
import {colors, fonts} from '../constants/theme';
import {titleCase} from '../functions/commonfunction';
import {textStyles} from '../styles/textStyles';
const Item = ({item}) => {
  return (
    <View
      style={{
        width: wp(90),
        height: hp(6),
        alignItems: 'center',
        flexDirection: 'row',
        borderBottomColor: colors.inputBgColor,
        borderBottomWidth: 1,
      }}>
      <FontAwesome
        name={'map-marker'}
        style={{marginRight: wp(2)}}
        color={'#a1aac4'}
        size={wp(6)}
      />
      <Text
        numberOfLines={1}
        style={{
          ...textStyles.Label,
          textAlign: 'center',
          fontFamily: fonts.Medium,
        }}>
        {item.name}
      </Text>
    </View>
  );
};

const SectionListDropDown = ({
  isModalVisible,
  setIsModalVisible,
  setSelectedValue,
}) => {
  const [loading, setLoading] = useState(false);
  const [suggestionsList, setSuggestionsList] = useState([]);
  const [search, setSearch] = useState('');
  useEffect(() => {
    if (search.trim().length > 2) {
      ur_api_call_here_and_other_logic (search);
    }
  }, [search]);

   const ur_api_call_here_and_other_logic = () => {
    }

  return (
    <Modal
      style={{
        justifyContent: 'flex-end',
        margin: 0,
      }}
      useNativeDriver={true}
      backdropColor={colors.primaryColor}
      backdropOpacity={1}
      hideModalContentWhileAnimating={true}
      backdropTransitionOutTiming={0}
      animationInTiming={500}
      animationOutTiming={500}
      isVisible={isModalVisible}
      onBackdropPress={setIsModalVisible}>
      <View style={styles.main_view}>
        <View
          style={{
            width: wp(90),
            flexDirection: 'row',
            alignItems: 'center',
            //backgroundColor: colors.inputBgColor,
            height: hp(7),
            marginBottom: wp(2),
          }}>
          <TouchableOpacity onPress={setIsModalVisible}>
            <Entypo name="cross" size={wp(7)} color={colors.textPrimaryColor} />
          </TouchableOpacity>
          <Text
            style={{
              ...textStyles.heading,
              marginLeft: wp(4),
              fontFamily: fonts.Bold,
            }}>
            Departure
          </Text>
        </View>
        <SectionList
          showsVerticalScrollIndicator={false}
          sections={suggestionsList}
          ListEmptyComponent={
            <Text
              style={{
                ...textStyles.Label,
                textAlign: 'center',
                fontFamily: fonts.Bold,
              }}>
              Please Enter a least three characters
            </Text>
          }
          scrollEventThrottle={500}
          ListHeaderComponent={
            <TouchableOpacity
              style={{
                backgroundColor: colors.inputBgColor,
                height: hp(7),
                alignItems: 'center',
                flexDirection: 'row',
                paddingHorizontal: wp(5),
                borderRadius: wp(2),
                marginBottom: wp(2),
                width: wp(90),
              }}>
              <FontAwesome
                name={'circle-o'}
                style={{marginRight: wp(2)}}
                color={'#a1aac4'}
                size={wp(6)}
              />
              <TextInput
                value={search}
                onChangeText={text => setSearch(text)}
                placeholderTextColor={colors.secondaryTextColor}
                placeholder="Search here your destination"
                style={{
                  width: wp(72),
                  fontFamily: fonts.Medium,
                  includeFontPadding: false,
                  borderRadius: wp(2),
                  paddingHorizontal: wp(2),
                  backgroundColor: colors.inputBgColor,
                  justifyContent: 'center',
                  color: colors.textPrimaryColor,
                  fontSize: RFValue(14),
                  alignItems: 'center',
                  alignSelf: 'center',
                  height: hp(7),
                }}
              />
            </TouchableOpacity>
          }
          keyExtractor={(item, index) => item   index}
          renderItem={({item}) => <Item item={item} />}
          renderSectionHeader={({section: {title}}) => (
            <View
              style={{
                backgroundColor: colors.primaryColor,
                width: wp(90),
                height: hp(7),
                flexDirection: 'row',
                marginVertical: wp(2),
                borderRadius: wp(1),
                alignItems: 'center',
                paddingHorizontal: wp(2),
              }}>
              {title == 'hotels' ? (
                <FontAwesome
                  name={'hotel'}
                  style={{marginRight: wp(2)}}
                  color={'#fff'}
                  size={wp(6)}
                />
              ) : (
                <FontAwesome
                  name={'circle-o'}
                  style={{marginRight: wp(2)}}
                  color={'#fff'}
                  size={wp(6)}
                />
              )}
              <Text
                style={{
                  ...textStyles.heading,
                  fontFamily: fonts.Bold,
                  color: colors.white,
                }}>
                {titleCase(title)}
              </Text>
            </View>
          )}
        />
        {loading && (
          <View style={styles.loadingView}>
            <ActivityIndicator color={colors.textPrimaryColor} size={'large'} />
          </View>
        )}
      </View>
    </Modal>
  );
};
export default SectionListDropDown;

const styles = StyleSheet.create({
  main_view: {
    justifyContent: 'center',
    backgroundColor: colors.white,
    //borderTopLeftRadius: wp(5),
    padding: wp(5),
    paddingVertical: wp(2),
    flex: 1,
    //borderTopRightRadius: wp(5),
  },
});