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

Yakupguly Malikov · Accepted Answer · 2022-12-26 07:55:25Z

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)

answered Dec 26, 2022 at 7:55

Yakupguly Malikov

7191 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

I'm RamOP Over a year ago

thats good but still code is not working...chart is not forming is there any else mistake

Yakupguly Malikov Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related