0

i'm trying to fetch my json api on react native chart kit using async await but my code is giving error map is not defined..

here's error TypeError: Cannot read properties of undefined (reading 'map')

here my code react native android

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { LineChart } from 'react-native-chart-kit';

const Screen1 = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://script.googleusercontent.com/macros/echo?user_content_key=4CmBJH-t4l8ttf8ZbxbCbmzvEbJH3Ia_ja0IZluqEYcfMGQbXbN4cQ4iZ42wKRZZIgmJqtzTWLTa0xF1lhksn1SA7CZrB2vTm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnFUk1oS11HODC4kgVFcklP7bly7smBobZeLSs9YBkifDWjjSjPFy1arSlO4XMWHwy6rFUIhT1qAKQGwcfvSKEfWhfhmpWtCcBNz9Jw9Md8uu&lib=MwHLfleKugAQlVo-Cygvk5qOcTyEVBS6e');
      const result = await response.json();
      setData(response.data);
    };

    fetchData();
  }, []);

  const chartData = {
    labels: data.map(item => item.put),
    datasets: [
      {
        data: data.map(item => item.call),
      },
    ],
  };

  return (
    <View>
      <LineChart
        data={chartData}
        width={320} // from react-native
        height={220}
        yAxisLabel="$"
        yAxisSuffix="k"
        yAxisInterval={1} // optional, defaults to 1
        chartConfig={{
          backgroundColor: '#e26a00',
          backgroundGradientFrom: '#fb8c00',
          backgroundGradientTo: '#ffa726',
          decimalPlaces: 2, // optional, defaults to 2dp
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16,
          },
          propsForDots: {
            r: '6',
            strokeWidth: '2',
            stroke: '#ffa726',
          },
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16,
        }}
      />
    </View>
  );
};

export default Screen1;

please can someone tell me where i'm mistaken

I'm RamOP
  • 1
  • 2

1 Answers1

0

I think it because you are setting response.data setData(response.data); instead of setData(result.data); but when I look response data it should be something like this setData(result.AlgoData)

Yakupguly Malikov
  • 584
  • 1
  • 1
  • 12
  • thats good but still code is not working...chart is not forming is there any else mistake – I'm RamOP Dec 26 '22 at 17:12
  • One of the reason might be is that your data is not in JSON format. Since you are using as item.put and item.call while you are setting your chartData, it is not object it is in array format. Try to organize your response data according to the `react-native-chart-kit` package requires. – Yakupguly Malikov Dec 26 '22 at 18:15