How to type a react composition component pattern with dot notation

October 2, 2022

I am having some trouble understanding how to properly type a classic simple react composition pattern.

Say i have a Team component that takes a Team.Players children component. Typescript is telling me that the Players property does not exist in the type definition of Team, how can i fix this ?

import './App.css'
import Team from './components/team/Team'

function App() {

  return (
    <div className="App">
      <Team>
        <Team.Players />
        <Team.Victories />
      </Team>
    </div>
  )
}

export default App

// type imports
import { TeamProps } from "../../types/TeamTypes"
import Players from './Players'
import Victories from './Victories'

const Team = ({children}: TeamProps) => {
  Team.Players = Players
  Team.Victories = Victories
  return (
    <div>
      {children}
    </div>
  )
}
export default Team

const Players = () => {
  return (
    <div>
      Playersss
    </div>
  )
}

export default Players

export type TeamProps = { 
  children:  JSX.Element,
}

>Solution :

It should be more like:

const Team = ({children}: TeamProps) => {
  return (
    <div>
      {children}
    </div>
  )
}

Team.Players = Players
Team.Victories = Victories

export default Team