TypeError: Cannot read properties of undefined (reading 'price') CryptoDetails

[ArbiNMaki]

TypeError: Cannot read properties of undefined (reading 'price') D:/cryptoapp/src/components/CryptoDetails.jsx:27 I don't know how to fix this problem, thanks for your help, I will really appreciate!!!

[DenizOrsel]

You need to control the flow of state by using the isFetching . Issue happens when you try to display data from an external resource (such as through APIs) which is not there yet thus is undefined. isFetching will grant the opportunity so that promise is filled and data is fetched then displayed.

I suggest you to study React states and ES6 promise, fetch, await, async calls to have an under the hood idea. Good luck.

[abhishek351]

do these if (isFetching) return 'loading...'

[Amaanullah-10]

Still it is not helping

[abhishek351]

then You have made a typo mistake..check again

[Amaanullah-10]

No i don't think so since i had pasted it from the resources provided to make sure

[Amaanullah-10]

THE CODE FOR CRYPTODETAILS IS AS BELOW

import React,{useState} from 'react'; import HTMLReactParser from 'html-react-parser'; import {useParams} from 'react-router-dom'; import millify from 'millify'; import {Col,Row,Typography,Select} from 'antd'; import { MoneyCollectOutlined, DollarCircleOutlined, FundOutlined, ExclamationCircleOutlined, StopOutlined, TrophyOutlined, CheckOutlined, NumberOutlined, ThunderboltOutlined } from '@ant-design/icons'; import {useGetCryptoDetailsQuery} from '../services/cryptoApi';

const {Title,Text}=Select; const{Options}=Select;

const CryptoDetails = () => { const{ coinId } = useParams(); const [timePeriod,setTimePeriod] = useState('7d'); const {data, isFetching}=useGetCryptoDetailsQuery(coinId);
const cryptoDetails = data?.data?.coin;

if (isFetching) return 'Loading...';

const time = ['3h', '24h', '7d', '30d', '1y', '3m', '3y', '5y'];

const stats = [
  { title: 'Price to USD', value: `$ ${cryptoDetails.price && millify(cryptoDetails.price)}`, icon: <DollarCircleOutlined /> },
  { title: 'Rank', value: cryptoDetails.rank, icon: <NumberOutlined /> },
  { title: '24h Volume', value: `$ ${cryptoDetails.volume && millify(cryptoDetails.volume)}`, icon: <ThunderboltOutlined /> },
  { title: 'Market Cap', value: `$ ${cryptoDetails.marketCap && millify(cryptoDetails.marketCap)}`, icon: <DollarCircleOutlined /> },
  { title: 'All-time-high(daily avg.)', value: `$ ${millify(cryptoDetails.allTimeHigh.price)}`, icon: <TrophyOutlined /> },
];

const genericStats = [
  { title: 'Number Of Markets', value: cryptoDetails.numberOfMarkets, icon: <FundOutlined /> },
  { title: 'Number Of Exchanges', value: cryptoDetails.numberOfExchanges, icon: <MoneyCollectOutlined /> },
  { title: 'Aprroved Supply', value: cryptoDetails.approvedSupply ? <CheckOutlined /> : <StopOutlined />, icon: <ExclamationCircleOutlined /> },
  { title: 'Total Supply', value: `$ ${millify(cryptoDetails.totalSupply)}`, icon: <ExclamationCircleOutlined /> },
  { title: 'Circulating Supply', value: `$ ${millify(cryptoDetails.circulatingSupply)}`, icon: <ExclamationCircleOutlined /> },
];

return (
  <Col className="coin-detail-container">
    <Col className="coin-heading-container">
      <Title level={2} className="coin-name">
        {data?.data?.coin.name} ({data?.data?.coin.slug}) Price
      </Title>
      <p>{cryptoDetails.name} live price in US Dollar (USD). View value statistics, market cap and supply.</p>
      </Col>
      </Col>
);

}

export default CryptoDetails

[Amaanullah-10]

CODE FOR CRYPTO API

import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';

const cryptoApiHeaders={ 'x-rapidapi-host': 'coinranking1.p.rapidapi.com', 'x-rapidapi-key': 'c2198b630fmsh09fc8b1e463894dp167cebjsn400e7a009c6d'
};

const baseUrl = 'https://coinranking1.p.rapidapi.com';

const createRequest = (url) => ({ url, headers: cryptoApiHeaders });

export const cryptoApi = createApi({ method:'GET', reducerPath:'cryptoApi', baseQuery:fetchBaseQuery({baseUrl}), endpoints:(builder) =>({ getCryptos : builder.query({ query: (count) => createRequest(/coins?limit=${count}), }), getCryptoDetails: builder.query({ query: (coinId) => createRequest(/coin/${coinId}),

}),

}), });

export const { useGetCryptosQuery, useGetCryptoDetailsQuery, } = cryptoApi;

[abhishek351]

add these after Col .. its working fine or add some more data in the cryptodetails.jsx then run it.

[Amaanullah-10]

It still does not work even adding some data did not help me

[kaustubh2020]

I don't know much but I found a typo- const {Title,Text}=Select; const{Options}=Select;

will be- const { Title, Text } = Typography; const { Option } = Select;

Remove this if not using the 2nd endpoint- const [timePeriod,setTimePeriod] = useState('7d'); and the code related to this.

[Harikesh666]

@Cyberpunk207 is your issue resolved ??, then please help me because I'm getting the same error

[Harikesh666]

@ArbiNMaki is your issue resolved ??, then please help me because I'm getting the same error

[Harikesh666]

I'm also getting the same error, can anyone please help me as I'm making this for my final year project.

[Deepanshusunwal]

I am also getting the same error

[Harikesh666]

@Deepanshusunwal if you get any solutions please let me know because I'm making this for my final year project

[josephkem]

Okay I think I figured it out if anyone is getting the issue. You have to check the isFetching right after you set the data like so:

**const { data, isFetching } = useGetCryptoDetailsQuery(coinId); const cryptoDetails = data?.data?.coin;

if (isFetching) return "Loading . . ."; console.log(cryptoDetails);**

[Harikesh666]

Thanks , will try this and let you know

On Sat, Oct 16, 2021, 4:48 PM Deepanshu sunwal @.***> wrote:

I am also getting the same error

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_cryptoverse/issues/5#issuecomment-944900041, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVGQANMXO2UG3HCT2UBK3JLUHFNRNANCNFSM5E4MAZ6Q .

[Deepanshusunwal]

@josephkem i've tried this too , but not working

[Deepanshusunwal]

@Harikesh666 if there will be no other solution , then what you can do is , Download the ZIP folder of the code from github , and you can make the changes what you've Done in your project.

[Harikesh666]

@Deepanshusunwal will it work like that ?? I mean I'll have to change the api right ? I mean like the api code that I've got from rapid api

[josephkem]

@Deepanshusunwal Can you post a pic of your code if possible?

[Deepanshusunwal]

@josephkem Yes, you have to change just an Api key. It worked for me.

[Harikesh666]

@Deepanshusunwal I mean can you elaborate please ?? Do I have to get another api key ??

[izhar360]

@josephkem Yes, you have to change just an Api key. It worked for me.

didn't work for me, i am getting " Cannot read properties of undefined (reading 'total') " even i changed the API

[izhar360]

it works now, after changing the api, i restarted the server...and bang

[Harikesh666]

@izhar360 are you using rapid api (the one mentioned in the video) ?? Or did you change it to another one ?? I mean my chart isn't showing any data

[izhar360]

@izhar360 are you using rapid api (the one mentioned in the video) ?? Or did you change it to another one ?? I mean my chart isn't showing any data

i changed it, subscribed to another one...just changed the api key

[Harikesh666]

@izhar360 can you tell me the name of the api you're currently using ??

[Harikesh666]

I mean it'll sem like I'm bugging you but it's kinda urgent cause day after tomorrow's my project submission

[izhar360]

I mean it'll sem like I'm bugging you but it's kinda urgent cause day after tomorrow's my project submission

No problem mate...

Its the same api he is using in the video but you have to subscribe for it to get the key...

If it still doesn't work for you, You can download or fork my repo, it has some improvements as well

https://github.com/izhar360/cryptoverse

Ps: i am free, you can ask anything

[Harikesh666]

I mean it'll sem like I'm bugging you but it's kinda urgent cause day after tomorrow's my project submission

No problem mate...

Its the same api he is using in the video but you have to subscribe for it to get the key...

If it still doesn't work for you, You can download or fork my repo, it has some improvements as well

https://github.com/izhar360/cryptoverse

Ps: i am free, you can ask anything

Thanks you so much 😊

[Harikesh666]

@izhar360 bro I changed the key but chart is empty , it's not showing any data

[AlexMuia31]

Okay I think I figured it out if anyone is getting the issue. You have to check the isFetching right after you set the data like so:

**const { data, isFetching } = useGetCryptoDetailsQuery(coinId); const cryptoDetails = data?.data?.coin;

if (isFetching) return "Loading . . ."; console.log(cryptoDetails);**

@Harikesh666 @josephkem This answer worked for me