'Why isn't data being pulled from database when I load the page?

I have a button that's supposed to run a function when loaded.

return (
      <>
        <LikeButtonStyle onLoad={getUserData} onClick={addInfo}>
          <Image width="10px" height="auto" src="/like-svgrepo-com.svg"></Image>
          <> {likeCount} </>
        </LikeButtonStyle>
      </>
    );

the function it's supposed to run is

async function getUserData() {
    const docSnap = await getDoc(userCollectionRef);
    if (docSnap.exists()) {
      setUser(docSnap.data().username);
      setUserLikes(docSnap.data().likePost);
      if (userLikes == 'no') {
        setLikeCount('0');
      } else {
        setLikeCount('1');
      }
    }
  }

So the idea is that when the page loads, it grabs the user data which is made up of two fields username and likePost. Once it grabs that data it's supposed to set that data in state.

It uses this data to count a 0 or 1 depending if the user has liked it or not.

Solution 1:^[1]

If you're not attributting the onLoad property to a valid HTML tag somewhere inside your <LikeButtonStyle /> component, it's not loading because onLoad only works in some tags, below is the list, according to w3s docs:

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>

I'd suggest you use useEffect to execute code you need to execute when the component renders

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Why isn't data being pulled from database when I load the page?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]