Reactで特定の条件を満たす行の背景色を変えたい

やりたいこと

値により行の背景を変えたい。ここではgenderがfemaleならピンクにする。
下記のような感じ。

基本方針？

基本的には条件に応じて三項演算子等を使ってstyleやclassNameを切り替えるのが基本。

条件 ? A : B;

条件がtrueならA、falseならBを実行。

CSSを切り替える

まず、CSSを切り替えてみる。
ループにて表を描画しながら、genderがfemaleなら背景を変えるような操作。

<tbody>
    {
        this.state.listData.map(member => (
            <tr key={member.docId} style={member.gender === "female" ? { background: "#ffe4e1" } : {}}>
                <td>{member.docId}d</td>
                <td>{member.email}</td>
                <td>{member.gender}</td>
                <td><img src={member.avatarUrl} height="30" width="30" alt="" /></td>
                <td><Link to={`/show/${member.docId}`}><Button size="sm" color="primary">詳細</Button></Link></td>
                <td><Link to={`/edit/${member.docId}`}><Button size="sm" color="success">編集</Button></Link></td>
            </tr>
        ))
    }
</tbody>

Classを切り替える

classの場合も基本は同じ。

あらかじめ、

.female {
  background: #ffe4e1;
}

のようなcssが定義されているものとして、下記のようにclassを切り替える。

<tbody>
    {
        this.state.listData.map(member => (
            <tr key={member.docId} className={member.gender === "female" ? "female" : null}>
                <td>{member.docId}d</td>
                <td>{member.email}</td>
                <td>{member.gender}</td>
                <td><img src={member.avatarUrl} height="30" width="30" alt="" /></td>
                <td><Link to={`/show/${member.docId}`}><Button size="sm" color="primary">詳細</Button></Link></td>
                <td><Link to={`/edit/${member.docId}`}><Button size="sm" color="success">編集</Button></Link></td>
            </tr>
        ))
    }
</tbody>

なお、もっとエレガントにclass名を制御したい場合は、こちらの記事が参考になります。
以上。