mapやfilterでアイテムがない場合に違う内容を表示したい

Question

先日、こちらの質問 をさせていただいたのですが、更にわからないことがあったので質問させていただきました。
回答していただいたこちらのコードで実行したところ正常に表示できたのですが、

{this.props.projects.map(project => (
    category.id == project.category.id &&
        <div key={project.id} className="project" >
            <div className="project-box">
                <p>{project.name}</p>
            </div>
        </div>
))}

下記のコードのようにカテゴリーに該当するプロジェクトがなかった場合に<p>なし</p>を返そうとすると、本来は下図の１のように１プロジェクトが一つもないカテゴリーの欄だけに一回だけ「なし」と表示したのですが下図の２ように大量に「なし」が表示されてしまいます。

{this.props.projects.map(project => (
    category.id == project.category.id ?
        <div key={project.id} className="project" >
            <div className="project-box">
                <p>{project.name}</p>
            </div>
        </div>
        :
        <p>なし</p>
))}

いろいろ調べてみて、filterでも試してみたのですがfilterを使用したとき条件に合わない場合は違う結果を表示させることは可能なのでしょうか。

{this.props.projects.filter(project => category.id == project.category.id).map(project => {
    return (
        <div>
            <p>{project.name}</p>
        </div>
    )
})}

また、map内で判定する方法もやってみたのですがこの場合も上記のような現象が起こってしまいます。

{this.props.projects.map(project => {
    if (category.id == project.category.id) {
        return (
            <p>a</p>
        )
    } else {
        return (
            <p>b</p>
        )

    }
})}

Comments

[mikan3rd]

>図の１のように１プロジェクトが一つもないカテゴリーの欄だけに一回だけ「なし」と表示したのですが下図の２ように大量に「なし」が表示されてしまいます。

上記の記述とは逆に大量に「なし」が表示されているのは図1の方ですが、図1と図2どちらが正しい表示なのでしょうか？

[hoshi-takanori]

filter の結果をいったん変数に入れて、空なら「なし」と表示すれば良いのでは。

Answer 1

先にプロジェクトが一つもない場合をチェックするようにすれば良いのではないでしょうか？

  if (this.props.projects.every(project => category.id !== project.category.id)) {
    return (<p>なし</p>)
  }
  return (
    {this.props.projects.map(project => (
      <div key={project.id} className="project" >
          <div className="project-box">
              <p>{project.name}</p>
          </div>
      </div>
    ))}
  );