I have a Requirement in which i need to store JSX/TSX For Example: <div>Hello {name} </div>

in a variable, like this: const Ele = <><div>Hello {name} </div></> to export for another component in React.

Well in normal Javascript it works fines! Everything.

But Problem is TypeScript isn't allowing me to store this even after declaring it to varName:any

(NOTE: For my requirement creating a React Functional Component won't Work!!! It must be normal variable in .ts file)

If anyone can help me? Thanks in advance! ;)

I tried it with :any and different JSX matching types which is provided by default, but no luck :(

CodePudding user response：

You want a React component, which is a function that returns JSX:

const Ele = () => <><div>Hello {name} </div></>;

CodePudding user response：

You should use React.ReactNode type for your React node element

const name: React.ReactNode = Ele