Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Received NaN for the `children` attribute. If this is expected, cast the value to a string error React Javascript Firebase

I’m new to react/firebase and I’m trying to create a like button. However when I click on the button, the like count shows up as NaN and I receive the error shown in the title. I’ve tried parsing the input but the NaN error still shows up and I’m not sure why.

    const LikeButton = ({ post }) => {
    
    const handleClick = async () => {
      let likeCount = post.likeCount;
  
      const date = new Date();
      
      likeCount = likeCount + 1;
      
  
      await db.collection("posts").doc(post.id).set({
        createdAt: post.createdAt,
        updatedAt: date.toUTCString(),
        likeCount,
        title: post.title,
        
        
      });
    };
  
    return (
      <>
        <VStack>
          <IconButton
            size="lg"
            colorScheme='teal'
            aria-label="like"
            icon ={<BsHandThumbsUp />}
            onClick={() => handleClick()}
          />
          <Text bg="purple.100" rounded="md" w="100%" p={1}>
            {post.likeCount}
          </Text>
        </VStack>
        
      </>
    );
  };

  export default LikeButton;

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Change your likeCount variable to this:

let likeCount = post.likeCount || 0;
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading