CODEWITHSUNDEEP
reactjsfetch
Erik Oberta
Erik Oberta

Reputation: 68

Issue with fetching data

iam new to React and trying to show data from API, It works at first but after reload i got error " Cannot read properties of undefined (reading 'length')", any ideas what could it cause ? thanks

code looks like this:

import React from "react";
import { useEffect, useState } from "react";

const options = {
//options for API call
};

const Ticket = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(
      "https://daily-betting-tips.p.rapidapi.com/daily-betting-tip-api/items/daily_betting_coupons?sort=-id",
      options
    )
      .then((res) => res.json())
      .then((data) => {
        setData(data);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>data is loading...</p>;
  }

  return (
    <div>
      <h1>length: {data.data.length}</h1>
      
      <h2></h2>
    </div>
  );
};

export default Ticket;

Upvotes: 0

Views: 1913

Answers (2)

Md Misbauddin Chowdhury
Md Misbauddin Chowdhury

Reputation: 624

Use this code. I edited your code. Add a condition when set your data variable

if(data.data) {
  setData(data.data)
}

And also change this line

<h1>length: {data.data.length}</h1>

To

<h1>length: {data.length}</h1>

Here is the full code

import React from "react";
import { useEffect, useState } from "react";

const options = {
  //options for API call
};

const Ticket = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(
      "https://daily-betting-tips.p.rapidapi.com/daily-betting-tip-api/items/daily_betting_coupons?sort=-id",
      options
    )
      .then((res) => res.json())
      .then((data) => {
        if (data.data) {
          setData(data.data);
        }
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>data is loading...</p>;
  }

  return (
    <div>
      <h1>length: {data.length}</h1>

      <h2>Hello world</h2>
    </div>
  );
};

export default Ticket;

Upvotes: 1

Mohit Singh Negi
Mohit Singh Negi

Reputation: 54

You are getting this error because you have data state which is an array but in return you are trying to access data key from the state's data array, which is not there hence it returns the undefined and then you are trying to access the length from undefined.

Instead of data.data.length just use data.length

Upvotes: 2

Related Questions