2

I am using Typescript and I would like to have prop validation on a generic component. I would like to create a Field component which renders a label, an error message and a component which is passed as a prop. I had multiple attempts to make it work but one part or the other fails either way. I've also read through dozens of articles but I couldn't find anyone facing the exactly same issue.

This is what I've got so far:

interface IFieldProps<P> {
    is: React.ComponentType<P>;
}

class Field<P> extends React.PureComponent<IFieldProps<P>> {
    render() {
        const { is, ...rest } = this.props;

        const Component = is;

        return (
            <div>
                <Component {...rest} />
            </div>
        );
    }
}

interface ITextInputProps {
    value: string
}

class TextInput extends React.PureComponent<ITextInputProps> {
    render() {
        return (
            <input {...this.props} />
        );
    }
}

const render = () => <Field is={TextInput} />;

The typescript compiler is not yelling about that the prop value is missing in the render method, So I will make the IFieldProps to extend from P and that should make it work:

interface IFieldProps<P> extends P {
    is: React.ComponentType<P>;
}

The compiler now says that "An interface may only extend a class or another interface". Okay, then I will make this a type, no worries:

type IFieldProps<P> = P & {
    is: React.ComponentType<P>;
}

Now everything is screwed up. It yells on ...rest that "Rest types may only be created from object types". It yells on <Component /> that "JSX element type 'Component' does not have any construct or call signatures". And finally it yells on <Field /> that value prop is missing - and in the meantime the autocomplete on the props stops working in vscode. I thought that if I would have some constraints on P (e.g. P extends {}) that would fix some of the issues, but it didn't.

How can I make a generic component that inherits the props of a component passed as a prop? Is still something overcomplicated? How other people solve this issue?

1 Answer 1

0

It works when wrapped component props are kept in another prop (as opposed to being mixed with is):

interface IFieldProps<P> {
  is: React.ComponentType<P>;
  props: P;
};

class Field<P> extends React.PureComponent<IFieldProps<P>> {
  render() {
      const { is, props } = this.props;

      const Component = is;

      return (
          <div>
              <Component {...props} />
          </div>
      );
  }
}

interface ITextInputProps {
  readonly value: string;
}

class TextInput extends React.PureComponent<ITextInputProps> {
  render() {
      return (
          <input {...this.props} />
      );
  }
}

const render = () => <Field is={TextInput} props={{ value: ''} } />;

I wasn't able to find the source of the error based on the message:

Type 'Pick & Readonly>, "children" | Exclude>' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes["is"], P & { children?: ReactNode; }>'. Type 'Pick & Readonly>, "children" | Exclude>' is not assignable to type 'LibraryManagedAttributes["is"], P & { children?: ReactNode; }>'.

2
  • I also thought about this solution however it looks weird to me that I have to modify the API of my components just because I am using Typescript. I am also afraid that this would force the PureComponents to re-render because the props would change in every render. I would like to use this pattern for my buttons/links as well like <Button onClick={this.doThat}>Submit</Button> and <Button is={Link} to="/somewhere"}>Redirect me</Button> without modifying the API. Dec 23, 2018 at 13:40
  • I agree. However, I have a feeling this has more to do with React type definitions rather than TypeScript itself. When I was trying to make it work without changing your desired API, what helped was using the type parameter on the call side (const render = () => <Field<ITextInputProps> is={TextInput} value="foo" />) — but the type of the wrapped component (is) was still inferred incorrectly. Dec 23, 2018 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.