Sé que necesito una clave única, pero ¿dónde la agrego? Este es el archivo JSON:
"comments": [ { "dishId": 1, "rating": "4", "author": "Customer1", "comment": "This is a test Comment", "date": "2022-02-04T12:34:15.994Z", "id": 21 } ]El método de renderizado de RenderComment es el siguiente:
function RenderComments({ comments, postComment, dishId }) { if (comments != null) return ( <div className="col-12 col-md-5 m-1"> <h4>Comments</h4> <ul className="list-unstyled"> <Stagger in> {comments.map((comment) => { return ( <Fade in key={comment._id}> <li> <p>{comment.comment}</p> <p><b>-{comment.author}</b>, {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: '2-digit' }).format(new Date(comment.date))} </p> </li> </Fade> ); })} </Stagger> </ul> <CommentForm dishId={dishId} postComment={postComment} /> </div> ); else return ( <div></div> ); }Editar: he intentado cambiar "comentarios._id" a "comentarios.id" pero no ayuda.
Veo que usa _id prop en el mapa, pero en json tenemos id prop. Intente cambiar key={comment._id} a key={comment.id} . Porque si los objetos no tienen _id prop, su clave siempre estará undefined