El siguiente es mi componente Dishdetail en reactjs. Recibe accesorios de su componente principal y tiene un componente secundario llamado "RenderComments" que genera los comentarios de los accesorios.

 import React from "react"; import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from "reactstrap"; function RenderDish({dish}) { if (dish != null) { return ( <Card> <CardImg width="100%" object src={dish.image} alt={dish.name}></CardImg> <CardBody> <CardTitle>{dish.name}</CardTitle> <CardText>{dish.description}</CardText> </CardBody> </Card> ) } else { return ( <div></div> ) } } function RenderComments({comments}) { let c = []; if (comments != null) { c = comments.map((element) => { return ( <li key={element.id}> <p>{element.comment}</p> <p>-- {element.author}, {new Date(element.date).toLocaleDateString("en-us", { year: "numeric", month: "short", day: "2-digit" })}</p> </li> ) }); } return ( <div> <h4>Comments</h4> <ul className="list-unstyled"> {c} </ul> </div> ) } const Dishdetail =(props)=>{ return ( <div className="container"> <div className="row"> <div className="col-xs-12 col-md-5 m-1"> <RenderDish dish={props.dish}/> </div> <div className="col-xs-12 col-md-5 m-1"> <RenderComments comments={props.dish.comments}/> </div> </div> </div> ) } export default Dishdetail;

Recibo este error: "Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo 'comentarios')"

Como soy un principiante, no sé cómo solucionar este error. Por favor alguien me puede orientar? También me alegraría si alguien pudiera especificar el motivo de este error.