0

What is the correct typing to define for a property that is assigned to a stateful React.Component inside an interface.

The TemplateConfiguration interface has two properties Page and Form. Page's type is a stateless component (Presentational) and Form's type should be a stateful component.

Page works fine, however, the compiler gives me an error two places and I'm not sure what is the proper typing. Please read the comments below.

interface ConfigProps {
  // ...
}

interface ConfigState {
 // ...
}

interface TemplateConfiguration<T> {

  Form: React.Component<ConfigProps, ConfigState>;
  Page: React.FunctionComponent<T>; // this one works here

}

const myConfig: TemplateConfiguration  = {
  Page: ({arg1, arg2}) => (<div>...</div>), // and works here
  Form: class extends React.Component<ConfigProps, ConfigState> {
      // ^^^^ --- Type 'typeof Form' is missing the following properties from type 'Component<ConfigProps, ConfigState, any>': context, setState, forceUpdate, render, and 3 more

    render() {
      return (<div>Some text here</div>);
    }
  }
}

class App extends React.Component {

  render() {
    const { Form, Page } = myConfig;
    return (
      <div>
        <Form  /> // JSX element type 'Form' does not have any construct or call signatures
      </div>
    );
  }
}
1
  • 1
    Have you tried using just ComponentType<T>? Commented Jan 12, 2019 at 22:12

1 Answer 1

1

You have to use React.ComponentClass instead of React.Component

Form: React.Component<ConfigProps, ConfigState>;

should be

Form: React.ComponentClass<ConfigProps, ConfigState>;
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.