How to integrate api data with Section List react-native?

user_19536504 0
Viewed 23

I am trying to integrate an api with section list in react native as it is now in JSON, my end point are: id, quantity, token, txnFee, txnFeeToken, status, transactionType, createdAt, title. How to add this end point to integrate an api in section list. Please help me with this how to add this data and fetch from api so it can render into the section list

export const data = [
    {
        title: 'Today',
        key: 'today',
        data: [
            {
                iconUrl: '',
                primaryKey: 'pay to dbm',
                primaryLabel: '21,200',
                secondaryKey: '7:30 PM',
                secondaryLabel: 'USDT'
            },
        ]
    },
    {
        title: 'Yesterday',
        key: 'yesterday',
        data: [
            {
                iconUrl: '',
                primaryKey: 'pay to xyz',
                primaryLabel: '21,200',
                secondaryKey: '7:30 PM',
                secondaryLabel: 'USDT'
            },
        ]
    },
    {
        title: '14 DEC 2022',
        key: '14 dec 2022',
        data: [
            {
                iconUrl: '',
                primaryKey: 'pay to xyz',
                primaryLabel: '21,200',
                secondaryKey: '7:30 PM',
                secondaryLabel: 'USDT'
            },
        ]
    }
];

    const handleRenderSectionItem = ({ item, section }) => {
        const { iconUrl, primaryKey, primaryLabel, secondaryKey, secondaryLabel } = item;

        return (
            <RowComponent 
                onPress={() => {}}
                iconUri={iconUrl}
                primaryKey={primaryKey}
                primaryLabel={primaryLabel}
                secondaryKey={secondaryKey}
                secondaryLabel={secondaryLabel}
            />
        )
    }

    const handleRenderSectionHeader = ({ section: { title }}) => (
        <Text
            marginVertical={15}
        >{title}</Text>
    );

return (
    <View>
         <SectionList 
                sections={data}
                keyExtractor={({ item }) => item?.primaryKey}
                renderItem={handleRenderSectionItem}
                renderSectionHeader={handleRenderSectionHeader}
                stickySectionHeadersEnabled={false}
           />
    </View>
 )
react-native reactjs
1 Answers

You can use axios. here is the documentation for get and post operations https://axios-http.com/docs/api_intro

here is a demo code for you requirements.

import axios from 'axios';
axios({
  method: "get",
  url: `${BaseUrl}/endpoint`, // endpoint of Url
  headers: { 
    'Authorization': `Bearer ${token}` // this format is for bearer token
  },
})
.then((res)=>{
   setData(res.data)
})
.catch((e)=>{ console.log(e.response)})
user_197057140
Related