mapに条件をつけてリストをレンダリングしたい

前提・実現したいこと

Reactでmapに条件をつけてリストをレンダリングしたいのですが下記のような場合どのようにしてMapに条件を与えるのでしょうか。

React
1{this.props.categories.map(category => (
2    <div key={category.id} className="category" }}>
3        <div className="category-box">
4            <p>{category.name}</p>
5            {this.props.projects.map(project => {
6                <div key={project.id} className="project" >
7                    <div className="project-box">
8                        <p>{project.name}</p>
9                    </div>
10                </div>
11            })}
12        </div>
13    </div>
14))}

試したこと

このページを参考に下記のように書き換えてみたのですがFailed to compileと出てしまい、そもそも何も表示されなくなってしまいました。

React
1{this.props.categories.map(category => (
2    <div key={category.id} className="category" style={{ 'border-left': `6px solid ${category.color}` }}>
3        <div className="category-box">
4            <p>{category.name}</p>
5            {this.props.projects.map(project => (
6                {
7                    category.id == project.id &&
8                        <div key={project.id} className="project" >
9                            <div className="project-box">
10                                <p>{project.name}</p>
11                            </div>
12                        </div>
13                }
14            ))}
15        </div>
16    </div>
17))}

現状は下図のように

プロジェクトに登録されている内容がカテゴリーごとにすべて表示されてしまうのですが、
本来は下図のように

カテゴリーに対応したプロジェクトを表示したいのですがどのように改善するとこのように表示できるのでしょうか。

教えていただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

中括弧が余計です。

javascript
1            {this.props.projects.map(project => (
2                    category.id == project.id &&
3                        <div key={project.id} className="project" >
4                            <div className="project-box">
5                                <p>{project.name}</p>
6                            </div>
7                        </div>
8            ))}