2

I'm trying to create a map of react component with typescript which return the corresponding component based on the key, both Item1 and Item2 are react component.

const componentMap: {[key: string]: JSX. Element} = {
 "Item1": Item1,
 "Item2": Item2,
}

following is definition of item1 and item2

type itemProps = {
  props1: string,
  props2: boolean,
}

export const Item1 = (): JSX.Element => {
  return (<div/>)
}

export const Item2 = (props: itemProps): JSX.Element => {
  return (<div/>)
}

codesandbox sample

But get an alert

TS2739: Type 'OverridableComponent<BoxTypeMap<{}, "div">>' is 
missing the following properties from type
 'ReactElement<any, any>': type, props, key
2
  • Welcome to Stack Overflow! Please put all relevant details in the question, not just linked. What is Item1? What is item2? Three reasons not to only put that off-site on codesandbox: People shouldn't have to go off-site to help you; some sites are blocked for some users; and links rot, making the question and its answers useless to people in the future. More: How do I ask a good question? and Something in my web site or project doesn't work. Can I just paste a link to it? Commented Oct 26, 2021 at 14:10
  • Since this is about TypeScript, it can often be useful to replicate the problem in the [TypeScript playground]() as a minimal reproducible example and then post the full playground code in the question, along with a link to the playground for convenience. Commented Oct 26, 2021 at 14:11

1 Answer 1

1

You might need a ReactElement Or ReactNode as type. See When to use JSX.Element vs ReactNode vs ReactElement? for when to use which.

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

3 Comments

If the answer is in that question, vote to close as a duplicate rather than posting a redundant answer. (I'm not sure that question does answer this one, but if so, that's what to do.)
Not entirely, but enough of a duplicate to warrant this I think. I flagged it.
Thanks for your answer. ReactNode works fine.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.