Todo funciona bien, pero tengo esta advertencia Expected to return a value at the end of arrow function array-callback-return . Intenté usar forEach en lugar de map , pero luego <CommentItem /> ni siquiera aparece. ¿Cómo puedo solucionar esto?
return this.props.comments.map((comment) => { if (comment.hasComments === true) { return ( <div key={comment.id}> <CommentItem className="MainComment"/> {this.props.comments.map(commentReply => { if (commentReply.replyTo === comment.id) { return ( <CommentItem className="SubComment"/> ) // return } // if-statement }) // map-function } // map-function __begin </div> // comment.id ) // returnUn map() crea una matriz, por lo que se espera un return para todas las rutas de código (if/elses).
Si no desea una matriz o devolver datos, use forEach en su lugar.
La advertencia indica que no está devolviendo algo al final de la función de flecha del mapa en todos los casos.
Un mejor enfoque de lo que está tratando de lograr es usar primero un .filter y luego un .map , como este:
this.props.comments .filter(commentReply => commentReply.replyTo === comment.id) .map((commentReply, idx) => <CommentItem key={idx} className="SubComment"/>);La forma más fácil solo si no necesita devolver algo, simplemente return null