“Expected to return a value at the end of arrow function” warningの直し方

すべてうまくいくのですが、警告が出ます。

アロー関数array-calback-returnは最後に値を返すことが期待されています。

mapの代わりにforEachを使ってみましたが、そうすると<CommentItem />が表示されません。どうすればいいのでしょうか？

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
          
        ) // return

回答

この警告は、すべての場合において、map arrow関数の最後に何かを返していないことを示しています。

あなたが達成しようとしていることに対するより良いアプローチは、次のように、まず .filter を使用し、次に .map を使用することです。

this.props.comments
  .filter(commentReply => commentReply.replyTo === comment.id)
  .map((commentReply, idx) => <CommentItem key={idx} className="SubComment"/>);

map()は配列を作成するので、すべてのコードパス(if/elses)でreturnが期待されます。

配列を作りたくない場合やデータを返したくない場合は、代わりにforEachを使います。