React18: children prop must be explicitly declared

gjoseph · Nov 21, 2024 · e069ab7 · e069ab7
1 parent 7f36da4
commit e069ab7
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/tichu-clients/packages/tichu-web/src/components/CardSet.tsx b/tichu-clients/packages/tichu-web/src/components/CardSet.tsx
@@ -76,10 +76,10 @@ const withPosition =
 const PositionedCardView = withPosition(CardView);
 const PositionedCardBack = withPosition(CardBack);
 
-const CardSetContainer: FC<{ cardSize?: CardSize }> = ({
-  cardSize = "regular",
-  children,
-}) => {
+const CardSetContainer: FC<{
+  cardSize?: CardSize;
+  children?: React.ReactNode;
+}> = ({ cardSize = "regular", children }) => {
   const classNames = classes(
     styles.cardSet,
     cardSize === "small" ? styles.smallSet : styles.regularSet

diff --git a/tichu-clients/packages/tichu-web/src/components/CardView.tsx b/tichu-clients/packages/tichu-web/src/components/CardView.tsx
@@ -13,6 +13,7 @@ import styles from "./Card.module.css";
 export type OnCardClick = (card: Card) => void;
 export type CardSize = "small" | "regular";
 
+// no children elements in CardView
 interface CardViewProps {
   card: Card;
   selected: boolean; // TODO wonder if selected is anything than a css class that could be set by parent
@@ -51,9 +52,6 @@ const symbolFor = (card: Card): string => {
   }
 };
 
-/**
- * I don't know how to prevent children elements - does it matter?
- */
 export const CardView: FC<CardViewProps> = ({
   card,
   selected,

diff --git a/tichu-clients/packages/tichu-web/src/components/Game.tsx b/tichu-clients/packages/tichu-web/src/components/Game.tsx
@@ -14,7 +14,7 @@ import { OtherPlayer } from "./OtherPlayer";
 /**
  * Represents the player at the table
  */
-const Player: FC = (props) => {
+const Player: FC<{ children?: React.ReactNode }> = (props) => {
   return (
     <div className={styles.player}>
       This is me