Javascript

Unable to display blog comments on the browser in react js

admin
Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error Unable to display blog comments on the browser in react js on this date .

In the react component, there is a form used to post a comment. When I post a comment, it gets submitted and appears in the database. Using map function, I’m trying to display the blog comments on the browser but it just does not appear on the browser. I can see the array of comments in the redux devtools.

        <Container className="content">
            <div>
                <h1 className='display-2'>{blog.title}</h1>
                <Image src={blog.image} />
                <h2 className='text-muted mt-3'>Category: {blog.category}</h2>
                <div className='mt-5 mb-5' dangerouslySetInnerHTML={createBlog()} />
            </div>
            <div>
                
            {blog?.post?.comments.length === 0 && <Message variant='info'>No comment yet</Message>}
                <div>
                    {blog?.post?.comments.map((comment) => (
                        <div key={comment?.id}>
                            <strong>{comment?.name}</strong>            
                            <p>{comment?.dateCreated.substring(0, 10)}</p>
                            <p>{comment?.comment}</p>
                        </div>
                    ))}
                </div>
                    
            {blogCommentLoading && <Loader />}
            {blogCommentSuccess && <Message variant='success'>Comment Submitted</Message>}
            {blogCommentError && <Message variant='danger'>{blogCommentError}</Message>}
                <Form onSubmit={submitHandler}>
                <Form.Group controlId='comment'>
                    <Form.Label>Comment</Form.Label> {/* The label called review is named comment in the database(backend)*/}
                    <Form.Control
                        as='textarea'
                        row='5'
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                    ></Form.Control>
                </Form.Group>
                <Button type='submit' variant='primary'>Submit</Button>
                </Form>
            </div>
        </Container>
        
    );
};

What am I missing out, how do I make the comments to appear on the browser?

Answer

Replace

{blog?.post?.comments.length === 0 && <Message variant='info'>No comment yet</Message>}
 <div>
    {blog.post.comments.map((comment) => (
       <div key={comment?.id}>
           <strong>{comment?.name}</strong>            
           <p>{comment?.dateCreated.substring(0, 10)}</p>
           <p>{comment?.comment}</p>
       </div>
    ))}
 </div>

with:

{!blog?.post?.comments?.length ? (
    <Message variant='info'>No comment yet</Message>
) : (
 <div>
    {blog?.post?.comments.map((comment) => (
       <div key={comment?.id}>
           <strong>{comment?.name}</strong>            
           <p>{comment?.dateCreated.substring(0, 10)}</p>
           <p>{comment?.comment}</p>
       </div>
     ))}
 </div>
)}