How to pass conditional props to unknown type of react component in typescript?

Question

I have this components:

export function Hover(props: PolygonProps) {
   //...
}

 export function Route(props: CenterProps) {
   //...
 }

This enum:

export enum Highlight {
     HOVER,
     ROUTE,
 }

This object:

export const HIGHLIGHTS = {
    [Highlight.HOVER]: Hover,
    [Highlight.ROUTE]: Route,
};

And this code in render:

   let HighlightComponent;
   сonst center = props.center;
   const points = props.points;
   if (highlight !== undefined) {
       HighlightComponent = HIGHLIGHTS[highlight] as React.ComponentType<CenterProps | PolygonProps>;
   }
   const centerProps: CenterProps = { center };
   const polygonProps: PolygonProps = { points };

   return <div>{HighlightComponent && <HighlightComponent />}</div>

Question: how to pass props of needed type (CenterProps or PolygonProps) if i dont know type? Is it correct structure for the case or not?

Where do your props come from? You know the props are CenterProps or PolygonProps. So let's say you have const someProps: CenterProps | PolygonProps = ..., then you can pass them like this: <HighlightComponent {...someProps} /> — sroes
– sroes, Commented May 4, 2020 at 6:33
@sroes, i've updated the question. Yes, but i don't want to pass props that have not to be passed, i can pass every prop, but it doesn't look clear. — vadimka
– vadimka, Commented May 4, 2020 at 6:35

sroes · Accepted Answer · 2020-05-04 07:04:11Z

1

Since you have two seperate props, you must still check to see which one to use. So I would drop the HIGHLIGHTS constant and simply use a switch:

   const centerProps: CenterProps = { center: 'someValue' };
   const polygonProps: PolygonProps = { points: 'someOtherValue' };

   let highlightComponent;
   if (highlight !== undefined) {
       switch (highlight) {
           case Highlight.HOVER:
               highlightComponent = <Hover {...polygonProps} />;
               break;
           case Highlight.ROUTE:
               highlightComponent = <Route {...centerProps} />;
               break;
       }
   }

   return <div>{highlightComponent}</div>

Another option would be to define the props like this:

const centerProps: CenterProps = { center: 'someValue' };
const polygonProps: PolygonProps = { points: 'someOtherValue' };

export const HIGHLIGHT_PROPS = {
    [Highlight.HOVER]: polygonProps,
    [Highlight.ROUTE]: centerProps,
};

And then:

let HighlightComponent;
let highlightProps;
if (highlight !== undefined) {
    HighlightComponent = HIGHLIGHTS[highlight] as React.ComponentType<CenterProps | PolygonProps>;
    highlightProps = HIGHLIGHT_PROPS[highlight] as CenterProps | PolygonProps;
}

return <div>{HighlightComponent && <HighlightComponent {...highlightProps} />}</div>

edited May 4, 2020 at 7:04

answered May 4, 2020 at 6:45

sroes

15.1k1 gold badge58 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vadimka Over a year ago

This is pretty sad answer, because i really don't like switch-case in render.

vadimka Over a year ago

I will use switch-case, thank you for the answer, i though there is another way to do that without switch-case, because enum values count will increase.

Martin Shishkov · Accepted Answer · 2020-05-04 06:45:36Z

1

If I understood correctly you can simply do:

if (highlight !== undefined) {
    HighlightComponent = HIGHLIGHTS[highlight] === HIGHLIGHTS.HOVER 
       ? <Hover {...polygonProps}/>
       : <Route {...centerProps}/>;
}

return <div>{HighlightComponent && <HighlightComponent />}</div>

However this looks like a code smell so I would suggest that you change your props to be HighlightComponent: JSX.Element and just pass in the relevant component.

answered May 4, 2020 at 6:45

Martin Shishkov

2,8675 gold badges29 silver badges44 bronze badges

1 Comment

vadimka Over a year ago

I have enum value (highlight) in redux store so i can't pass component with props.

Collectives™ on Stack Overflow

How to pass conditional props to unknown type of react component in typescript?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related