[React] 하위 요소의 데이터 내용에 따라 모 어셈블리에서 추출

코드

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

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

설명

개요

코드 세부 정보

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

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

액션