React Native Typescript: how to dinamically render a Component-CodePudding

I've been struggling for 3 hours with this problem.

  const steps = [
    {
      Component: ChooseGameMode,
      props: {
        initialValue: gameMode,
        onComplete: handleChooseGameModeComplete
      }
    },
    {
      Component: ChooseGameType,
      props: {
        initialValue: gameType,
        onComplete: handleChooseGameTypeComplete
      }
    },
    {
      Component: ChooseGameSeverity,
      props: {
        initialValue: gameSeverity,
        onComplete: handleChooseGameSeverityComplete
      }
    },
    {
      Component: ChooseGamePlayers,
      props: {
        previousPlayers: previousPlayers,
        initialValue: gamePlayers,
        onComplete: handleChooseGamePlayersComplete
      }
    }
  ];

  const {Component: CurrentComponent, props: currentComponentProps} =
    steps[currentSetupStepIndex];

Given the following code I'd need to render the component CurrentComponent with the relative properties currentComponentProps but I can't figure out the right way because typescript is slapping (deserved) me in the face.

I've would have done something like <CurrentComponent {...currentComponentProps} /> but it is obviously too easy to be true.

Thank you for the help.

CodePudding user response：

It would seem that this pattern would be better served by skipping JSX?

You should be able to use React.createElement instead. https://reactjs.org/docs/react-api.html#createelement

return React.createElement(
  CurrentComponent,
  currentComponentProps,
)

CodePudding user response：

Unfortunately it gives:

const CurrentComponent: React.MemoExoticComponent<({ initialValue, onComplete }: ChooseGameModeProps) => JSX.Element> | React.MemoExoticComponent<({ initialValue, onComplete }: ChooseGameTypeProps) => JSX.Element> | React.MemoExoticComponent<...> | React.MemoExoticComponent<...>
No overload matches this call.
  The last overload gave the following error.
    Argument of type 'MemoExoticComponent<({ initialValue, onComplete }: ChooseGameModeProps) => Element> | MemoExoticComponent<({ initialValue, onComplete }: ChooseGameTypeProps) => Element> | MemoExoticComponent<...> | MemoExoticComponent<...>' is not assignable to parameter of type 'string | FunctionComponent<{ initialValue: GameMode | null; onComplete: (mode: GameMode) => void; previousPlayers?: undefined; }> | ComponentClass<{ ...; }, any>'.
      Type 'MemoExoticComponent<({ initialValue, onComplete }: ChooseGameTypeProps) => Element>' is not assignable to type 'string | FunctionComponent<{ initialValue: GameMode | null; onComplete: (mode: GameMode) => void; previousPlayers?: undefined; }> | ComponentClass<{ ...; }, any>'.
        Type 'MemoExoticComponent<({ initialValue, onComplete }: ChooseGameTypeProps) => Element>' is not assignable to type 'FunctionComponent<{ initialValue: GameMode | null; onComplete: (mode: GameMode) => void; previousPlayers?: undefined; }>'.
          Types of parameters 'props' and 'props' are incompatible.
            Type 'PropsWithChildren<{ initialValue: GameMode | null; onComplete: (mode: GameMode) => void; previousPlayers?: undefined; }>' is not assignable to type 'ChooseGameTypeProps'.
              Types of property 'initialValue' are incompatible.
                Type 'GameMode | null' is not assignable to type 'GameType | null'.
                  Type 'GameMode.SINGLE' is not assignable to type 'GameType | null'.ts(2769)