is there anymistake in my code i'm trying to fetch api on react native chart kit

Question

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

Answer 1

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)