Generic component with default type

Question

In a TSX file, a generic component can be defined:

const MyComponent = <A,>() => <p>my component</p>

Note the , after A.

Now if I want A to be string by default, one would naturally assume that the above should be written:

const MyComponent = <A=string,>() => <p>my component</p>

Except this does not work.

What am I missing?

Hopeh

Generics and JSX don't play all that well together. Using <A,> (or e.g. <A extends any>) rather than <A> resolves a parsing ambiguity, but the =string apparently looks enough like a prop to confuse it again. – Plasma

Answer 1

The best solution I could find was to define it as a normal function instead:

const MyComponent = function <A = string>() {
  return <p>my component</p>;
};

While this is not functionally the same as an arrow function, my guess is that in the context of React, you probably won't care most of the time anyway.

Agalloch

Answer 2

How about:

const MyComponent = <string,>() => <p>my component</p>?

Any reason it wouldn't work?

Protective

Type parameter name cannot be 'string'. – Plasma