【React】親コンポーネントから子要素のデータ内容によって出し分ける

コード

index.tsx

import React from 'react'
import Child from '../components/MultiMap/Child'

export const App = () => {
  const teams = [1, 2, 3, 4]
  const members = [
    { hoby: 'football', name: 'Taro', team: 1 },
    { hoby: 'ayatori', name: 'Jiro', team: 3 },
    { hoby: 'work', name: 'Ken', team: 3 },
  ]
  return (
    <>
      {teams.map((team, index) => (
        <React.Fragment key={index}>
          {members.some((member) => {
            return member.team === team
          }) && (
            <>
              <h1>team {team}</h1>
            </>
          )}
          <div>
            {members.map((member, index) => (
              <Child key={index} member={member} team={team} />
            ))}
          </div>
        </React.Fragment>
      ))}
    </>
  )
}

export default App

components/MultiMap/Child.tsx

type Props = {
  member: {
    hoby: string
    name: string
    team: number
  }
  team: number
}

export const Child = ({ team, member }: Props) => {
  return <div>{member.team === team && member.name}</div>
}

export default Child

説明

概要

親コンポーネントで宣言したstateを
子コンポーネントで処理する方法もあるが、
コンポーネントもあまり階層を深くしたくない。

よって、この方法を試してみる。
Fragmentで対応している箇所もある。

コード詳細

members.some((member) => {
  return member.team === team
}

タイトル表示のレンダー条件として↑を指定。

const teams = [1, 2, 3, 4]

をmapで回し1から4まで個々の数値と、
各memberの所属teamが一致した時だけ、
someでtrueを返している。

動作

画像のようにteam1やteam3の下に、
各team所属のmemberをタイトル表示。