How to use axios parse and insert data into ListItem from react native element

NgWilson
April 27, 2023
167 views
1 vote
2 Answers

I’m trying to parse json data into list item from react native elements.

https://reactnativeelements.com/docs/components/listitem_title

How ever I’m unable to get it work.

It’s showing TypeError: undefined is not a function.

I tried search for other post but no result.

here’s my code

    const json = axios({
  method: 'get',
  url: `${baseUrl}`,
}).then((response) => {
  const json = response.data;
});

function HomeScreen() {
  return (
    <ScrollView>
    {
      json.map((l, i) => (
        <ListItem key={i} bottomDivider>
          <ListItem.Content>
            <ListItem.Title>{l[i].name}</ListItem.Title>
            <ListItem.Subtitle>{l[i].status}</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      ))
    }
  </ScrollView>
      );
    }

here’s my json return value

    Array [
  Object {
    "URL": "https://stream.twatc.net/RCKH_APP",
    "metar": "KHH",
    "name": "高雄終端管制區 - 高雄雷達席",
    "site_url": "RCKH_APP",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCKH_Scan",
    "metar": "KHH",
    "name": "高雄國際航空站 - 高雄掃描席",
    "site_url": "RCKH_Scan",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCKH_ATIS",
    "metar": "KHH",
    "name": "高雄國際航空站 - ATIS",
    "site_url": "RCKH_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCKH_TWR",
    "metar": "KHH",
    "name": "高雄國際航空站 - 塔台/地面席",
    "site_url": "RCKH_TWR",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCBS_ATIS",
    "metar": "KNH",
    "name": "金門航空站 - ATIS",
    "site_url": "RCBS_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCFG_ATIS",
    "metar": "LZN",
    "name": "馬祖南竿航空站 - ATIS",
    "site_url": "RCFG_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCMT_ATIS",
    "metar": "MFK",
    "name": "馬祖北竿航空站 - ATIS",
    "site_url": "RCMT_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCQC_ATIS",
    "metar": "MZG",
    "name": "馬公航空站 - ATIS",
    "site_url": "RCQC_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCMQ_ATIS",
    "metar": "RMQ",
    "name": "臺中航空站 - ATIS",
    "site_url": "RCMQ_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCTP_AppS",
    "metar": "TPE",
    "name": "臺北終端管制區 - 桃園南區雷達席",
    "site_url": "RCTP_AppS",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCAA_Scan",
    "metar": "TPE",
    "name": "臺北飛航情報區 - 掃描席(區管/近場)",
    "site_url": "RCAA_Scan",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCTP_TWR",
    "metar": "TPE",
    "name": "桃園國際機場 - 塔臺(一站)",
    "site_url": "RCTP_TWR",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCTP_ATIS",
    "metar": "TPE",
    "name": "桃園國際機場 - ATIS",
    "site_url": "RCTP_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCAA",
    "metar": "TPE",
    "name": "臺北飛航情報區 - 海峽席",
    "site_url": "RCAA_CTR",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCTP_TWR2",
    "metar": "TPE",
    "name": "桃園國際機場 - 塔臺(二站)",
    "site_url": "RCTP_TWR2",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCTP_circuit",
    "metar": "TPE",
    "name": "臺北終端管制區 - 桃園五邊雷達席",
    "site_url": "RCTP_circuit",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCTP_App_Scan",
    "metar": "TPE",
    "name": "臺北終端管制區 - 桃園掃描雷達席",
    "site_url": "RCTP_App_Scan",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCTP_AppN",
    "metar": "TPE",
    "name": "臺北終端管制區 - 桃園北區雷達席",
    "site_url": "RCTP_AppN",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCSS_ATIS",
    "metar": "TSA",
    "name": "松山國際航空站 - ATIS",
    "site_url": "RCSS_ATIS",
    "status": "Online",
  },
  Object {
    "URL": "https://stream.twatc.net/RCSS_App",
    "metar": "TSA",
    "name": "臺北終端管制區 - 松西席",
    "site_url": "RCSS_App",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCSS_TWR",
    "metar": "TSA",
    "name": "松山國際航空站 - 塔臺",
    "site_url": "rcss_twr2",
    "status": "Offline",
  },
  Object {
    "URL": "https://stream.twatc.net/RCFN_ATIS",
    "metar": "TTT",
    "name": "臺東航空站 - ATIS",
    "site_url": "RCFN_ATIS",
    "status": "Online",
  },
]

Can anyone told me what’s wrong I’m doing? Thanks advance

Tags: reactjs

Answers

Chosen as BEST ANSWER

I fixed the issue, code is as below

import React, { useState, useEffect } from 'react';
import { ScrollView } from 'react-native';
import { ListItem } from 'react-native-elements';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import axios from 'axios';

function HomeScreen() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get("url")
      .then(response => setData(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <ScrollView>
      {data.map((item, index) => (
        <ListItem key={index} bottomDivider>
          <ListItem.Content>
            <ListItem.Title>{item.name}</ListItem.Title>
            <ListItem.Subtitle>{item.status}</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      ))}
    </ScrollView>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="app" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

(Edit)

try to use useState and useEffect hook

     const [data,setdata] = useState([])
     useEffect(()=>{
      axios.get("url").then(function(response){
      setdata(response.data);
      },[])

     function HomeScreen() {
     return (
     <ScrollView>
     {
     data.map((l, i) => (
     <ListItem key={i} bottomDivider>
       <ListItem.Content>
        <ListItem.Title>{l[i].name}</ListItem.Title>
          <ListItem.Subtitle>{l[i].status}</ListItem.Subtitle>
       </ListItem.Content>
      </ListItem>
     ))
     }
    </ScrollView>
     );
   }

dont forgot to import useState and useEffect in top of your component!

Please signup or login to give your own answer.

Click here to cancel reply.