[SOLVED] React/TypeScript : Make a component interface with certain props, so that its parent can supply such props

Issue

I want to make a MenuButton interface or type which is supposed to have a "isMenuOpen" prop, that its parent can supply.

function Menu({ SomeButton }: { SomeButton: MenuButton }) {
  const [isOpen, setIsOpen] = useState(false)

  return <div><SomeButton isMenuOpen={isOpen} />{ isMenuOpen ? menu stuff : null }</div>
}

Solution

Use the type React.ComponentType:

type MenuProps = { SomeButton: React.ComponentType<{ isOpen: boolean }> }

function Menu(props: MenuProps) {
    return <SomeButton isOpen={true} />
}

Answered By – tokland

Answer Checked By – David Goodson (BugsFixing Volunteer)