CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooksreact-native-flatlist
mari
mari

Reputation: 53

REACT NATIVE : How can i display the data in FlatList?

How can i display the data of "Parameter_Code" , "Parameter_Units" in FlatList ?

"fieldTestList" is the data:

[{"Immediate_Report_Max": null, "Immediate_Report_Min": null, "Parameter_Code": "ECFD", "Parameter_Name": "Electrical conductivity in field at 25ºC", "Parameter_Units": "µmho/cm   "}, {"Immediate_Report_Max": null, "Immediate_Report_Min": "0", "Parameter_Code": "pHFD", "Parameter_Name": "pH in field", "Parameter_Units": "unit      "}, {"Immediate_Report_Max": null, "Immediate_Report_Min": null, "Parameter_Code": "T", "Parameter_Name": "Temperature", "Parameter_Units": "° C       "}]

this is my code :

import React, { useEffect, useState } from 'react';
import {
  Text,
  View,
} from 'react-native';
function debi() {
 const dispatch = useDispatch();
 
 useEffect(() => {
    (async () => {
      var fieldTestList = await getTestParamsByRequest(requestId);
      if (fieldTestList.length > 0) {
        setFieldTestDisplay(fieldTestList);
      }
    })();
  }, []);

function renderItem({ item, index }) {
 return (
<View>  </View>

);}
}

Upvotes: -1

Views: 157

Answers (1)

Muteshi
Muteshi

Reputation: 1308

import { ListItem } from 'react-native-elements'

<FlatList
        data={fieldTestList}
        keyExtractor={(item) => item.Parameter_Code}
        renderItem={({ item }) => (
            <ListItem bottomDivider >
    
    <ListItem.Content>
      <ListItem.Title>{item.Parameter_Units}</ListItem.Title>
      <ListItem.Subtitle>{item.Parameter_Code}</ListItem.Subtitle>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>

This should give you an idea of how to create your flatlist

Upvotes: 1

Related Questions