React class component has property but Typescript says it doesn't

Question

I am having an issue with React ref and class component.

My simplified code is below. We see I have a component called Engine which has a property getInfo. I do a test of this.activeElement && which means it is not null so it must be a React.ReactElement<Engine>. However Typescript compiler fails with error that this does not have property getInfo as seen in screenshot below.

class Engine extends React.Component {
    getInfo(count: number): void {
        console.log('info count:', count);
    }
}

class Wizard extends React.Component {
    activeElement: null | React.ReactElement<Engine>

    topLevelGetInfo(): void {
        this.activeElement && this.activeElement.getInfo(10);
    }

    handleRef = (el: null | React.ReactElement<Engine>) => this.activeElement = el;

    render() {
        return (
            <div>
                <Engine ref={this.handleRef} />
            </div>
        )
    }
}

My tsconfig.json:

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "sourceMap": true,
    "jsx": "react",
    "baseUrl": "src",
    "strict": true,
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "build",
    "build_test"
  ]
}

Arman Charan · Accepted Answer · 2018-10-31 03:09:28Z

1

To provide inferred access to getInfo - activeElement should be asserted as type Engine (rather than React.ReactElement<Engine>) or null.

activeElement also requires an initial value of null, as undefined is not valid.

// Engine.
class Engine extends React.Component {

  // Get Info.
  getInfo(count: number) {
    console.log("Info Count:", count);
  }

  // Render.
  render = () => <div>Engine</div>;

}

// Wizard.
export class Wizard extends React.Component {

  // Active Element.
  activeElement: Engine | null = null;

  // Top Level Get Info.
  topLevelGetInfo() {
    const { activeElement } = this;
    if (activeElement) activeElement.getInfo(10);
  }

  // Handle Ref.
  handleRef = (el: Engine | null) => (this.activeElement = el);

  // Render.
  render() {
    return (
      <div>
        Wizard.
        <Engine ref={this.handleRef} />
      </div>
    );
  }

  // Did Mount.
  componentDidMount() {
    console.log("Mounting Wizard.");
    this.topLevelGetInfo();
  }

}

edited Oct 31, 2018 at 3:09

answered Oct 31, 2018 at 2:44

Arman Charan

5,8292 gold badges26 silver badges36 bronze badges

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

1 Comment

Noitidart Over a year ago

Oh thank you very much @Arman!! Engine is actually one of many components it can be. The component must have the getInfo property, and it gets some props injected. Can I do React.ComponentType<{ prop1: blah }> somehow?

Dacre Denny · Accepted Answer · 2018-10-31 02:47:11Z

1

Looks like your Wizard and Engine classes aren't extending from React.Component. Try updating your class declarations like so:

class Engine extends React.Component  {
 ...

 render() { return null; }
}

class Wizard extends React.Component {
  ...
}

Also, be sure to include the required render() method for your <Engine /> component (ie as shown).

Here is a working example on codesandbox.io - hope that helps :-)

edited Oct 31, 2018 at 2:47

answered Oct 31, 2018 at 2:42

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

6 Comments

Noitidart Over a year ago

Oops my mistake, I forgot the extends React.Component part when typing the simplification. I still have the issue :(

Dacre Denny Over a year ago

@Noitidart just updated answer with link to working demo - does this help?

Dacre Denny Over a year ago

Where are you seeing the error? In your dev environemnt, or on codesandbox?

Noitidart Over a year ago

@DacreDenny in both. Codebox and dev. I really appreciate you trying so I +1.

Dacre Denny Over a year ago

@Noitidart you're welcome, this is very strange because I don't seem to get any syntax errors when I run the codebox sample - just curious to know what your tsconfig.json file looks like - can you add that to your OP ?

|

Collectives™ on Stack Overflow

React class component has property but Typescript says it doesn't

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related