React and TypeScript: incorrectly extends base class 'Component'

Question

I'm trying to create a class with TypeScript that extends React.Component, but I'm having this error:

Class 'Provider' incorrectly extends base class 'Component<{}, {}>'.
Types of property 'render' are incompatible. 
Type '(props: any) => any' is not assignable to type '() => false | Element'.

Here's the code:

import * as React from "react";

export default class Provider extends React.Component {
  props;
  getChildContext() {
    const { children, ...context } = this.props;
    return context;
  }
  render(props) {
    const { children } = props;
    return children[0];
  }
}

Igor Pejic · Accepted Answer · 2017-10-05 15:41:31Z

3

You have to specify the props when extending React.Component.

From the docs:

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }
    // 'HelloProps' describes the shape of props.
    // State is never set so we use the 'undefined' type.
export class Hello extends React.Component<HelloProps, undefined> {
        render() {
            return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
        }
    }

In addition to this: render doesn't accept an argument. render() is correct.

answered Oct 5, 2017 at 15:41

Igor Pejic

3,7061 gold badge17 silver badges32 bronze badges

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

Comments

Duncan · Accepted Answer · 2017-10-05 15:40:09Z

2

The error message is telling you that render() doesn't expect an argument. I suspect you are supposed to be using this.props?

Also your definition of an attribute props of type any is going to hide the type of props attribute in the base class so the compiler won't be able to work out the type of children[0].

answered Oct 5, 2017 at 15:40

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

Collectives™ on Stack Overflow

React and TypeScript: incorrectly extends base class 'Component'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related