-1

I'm learning React and making a very simple app, where I am getting info from github api and displaying my repos information. It doesn't work tho and I keep getting an error when I'm trying to find a particular

Uncaught TypeError: data.find is not a function

Here's my code (I deleted almost everything meaningful and left only the part where I'm trying to get at least one repository from the array):

`const RepoList = ({ repos }) => {
    const data = Getapiinfo("egor-no");
    const repo = data.find(item => item.name == "clangametesttask")

    return (
    <>
        <p>{JSON.stringify(repo)}</p>
    </>
    ); 
}`

That's what Getapiinfo function does (gets all the information about all my repos):

function Getapiinfo(login) {
    const [data, setData] = useState(null); 

    useEffect(() => {
        fetch(`https://api.github.com/users/${login}/repos`)
        .then((response) => response.json())
        .then(setData); 
    }, []);

    if (data) {
        return data; 
    };

    return "";
}

I'm not sure what I am missing, because data is definitely an array. At least when I delete the find line, it all works as expected and gets an element by its index:

const RepoList = ({ repos }) => {
    const data = Getapiinfo("egor-no");

    return (
    <>
        <p>{JSON.stringify(data)}</p>
        <p>{JSON.stringify(data[0])}</p>

    </>
    ); 
}

Can you help me with that? I've already spent too much time on this problem and I know it is something simple that I can't just notice. I've also looked through several topics here but none of them seem to have a correct answer or any answers at all :D

egor-n
  • 71
  • 2
  • 7
  • 1
    Your hook returns `""` at first, until the data is available. (That's very unusual, much more usual to return `null`.) Strings don't have a `find` method. You need to handle the fact that you don't have the data yet where you're trying to use it, see the answers to the linked questions for details. – T.J. Crowder Oct 26 '22 at 12:01
  • I don't know why my question is closed and especially why the links lead me to question where this particular Error isn't even mentioned. I'm really really disappointed with this website. If I google this particular error, I 'm not googling "My component can't read property in first render but in the second render my property , it will already have" – egor-n Oct 26 '22 at 12:13
  • The answers to the linked questions tell you how to fix the problem, and my comment above helps you understand how they do that. I'm sorry if that isn't deemed sufficient help by your definition. – T.J. Crowder Oct 26 '22 at 12:14
  • Thank you for your help, I have to fix it later. I wasn't answering to your paritcular comment just expressing general disappointment with IT-community and the way that you had the need to post the exact same comment under two answers, kinda shaming people for helping me. – egor-n Oct 26 '22 at 12:16
  • Yes, but...why? You had a question, you almost immediately got pointed to answers helping with the specific problem you had. Please read the [help] to better understand SO's model, and how it helps avoid the problem of not being able to find good answers because the same thing has a thousand different questions with a thousand different answers. (Sadly, the model isn't perfect, and SE Inc. fails to address its various problems while they pursue nonsense like "collectives," but...) – T.J. Crowder Oct 26 '22 at 12:17

2 Answers2

1

Getapiinfo initially returns"" before assigning values from the API call.

So check if the data has values using a useMemo

const repo = useMemo(() => data?.find(item => item.name == "clangametesttask"), [data])
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • There are **dozens** of previous versions of this question with answers. It's not useful to post new answers to duplicate questions. – T.J. Crowder Oct 26 '22 at 11:57
  • Thanks for the answer. but how come it prints data[1] then? It doesn't throw an Exception or anything, so javascript knows it's an array. Why it suddenly doesn't know it and pays attention to that ""? – egor-n Oct 26 '22 at 12:06
  • @T.J.Crowder there are dozens of them but it's impossible to find them by the name of error. Neither google nor stackoverflow search shows me them. Sometimes it's easier to ask something easy once again rather than digging hours and hours. – egor-n Oct 26 '22 at 12:09
  • @egor-n - Oh, I totally understand. The issue isn't asking the question (even after thorough searching, it can be hard to find previous versions), it's posting answers to something that anyone who has this kind of rep knows is a duplicate question and that the way we handle those on SO is by pointing people at the previous ones, not posting answers. It's key to SO's model -- every duplicate increases the odds of the next person finding those previous, hopefully-curated answers. – T.J. Crowder Oct 26 '22 at 12:12
1

You should return an array not a string, if nothing is found. So just change to this in order to return an empty array and then check if the array is not empty at your component in order to display the data

function Getapiinfo(login) {
    const [data, setData] = useState([]); 

    useEffect(() => {
        fetch(`https://api.github.com/users/${login}/repos`)
        .then((response) => response.json())
        .then(setData); 
    }, []);

    if (data) {
        return data; 
    };

    return [];
}

and then

<>
{data.length > 0 ? (
  <>
    <p>{JSON.stringify(data)}</p>
    <p>{JSON.stringify(data[0])}</p>
    </>) : null
    }
</>
Apostolos
  • 10,033
  • 5
  • 24
  • 39
  • There are **dozens** of previous versions of this question with answers. It's not useful to post new answers to duplicate questions. – T.J. Crowder Oct 26 '22 at 11:57