En el componente de reacción, hay un formulario que se usa para publicar un comentario. Cuando publico un comentario, se envía y aparece en la base de datos. Usando la función de mapa, intento mostrar los comentarios del blog en el navegador, pero simplemente no aparece en el navegador. Puedo ver la variedad de comentarios en las herramientas de desarrollo redux.
<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> ); };¿Qué me estoy perdiendo? ¿Cómo hago para que los comentarios aparezcan en el navegador?
Reemplazar
{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>con:
{!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> )}