CODEWITHSUNDEEP
reactjstypescript
J. Perkins
J. Perkins

Reputation: 4276

'TS2769: No overload matches this call' consuming React component

Trying to ramp back up on React & TypeScript after some time away, and I'm hitting an TypeScript error that I can't seem to get around.

ERROR in /Users/X/Projects/job-monitor-poc/src/index.tsx
[tsl] ERROR in /Users/X/Projects/job-monitor-poc/src/index.tsx(9,2)
      TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>[]'.
      Type 'Element' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>[]': length, pop, push, concat, and 26 more.

Versions are:

"@types/react": "^16.9.26",
"@types/react-dom": "^16.9.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.8.3",

My component is defined as Hello.tsx

import * as React from 'react';

export interface HelloProps {
    compiler: string;
    framework: string;
}

// Tried this, as shown at
// https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
export const Hello = (props: HelloProps) =>
    <h2>Hello from {props.compiler} and {props.framework}!</h2>;

// And this...
export const Hello: React.SFC<HelloProps> = (props: HelloProps) =>
    <h2>Hello from {props.compiler} and {props.framework}!</h2>;

// And this...
export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return <h2>Hello from {this.props.compiler} and {this.props.framework}!</h2>;
    }
}

Which is being loaded by index.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';

import { Hello } from './components/Hello';

import './styles.css';

ReactDom.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementsByTagName('body')
);

I've found a few TypeScript issues with similar sounding errors, notably this one. I tried downgrading to React 16.4.7, but their other suggestions seem to involve modifications to @types/react.

Has anyone encountered this? Any workarounds? Am I missing an obvious error in my own code here?

Upvotes: 0

Views: 4507

Answers (1)

Klas Mellbourn
Klas Mellbourn

Reputation: 44437

document.getElementsByTagName('body') returns an array of elements. So extracting the first element will fix your error:

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementsByTagName("body")[0]
);

Or you could use the more classic document.getElementsById("root"):

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById("root")
);

This assumes that the HTML contains a div with an id of root: 

  <body>
    <div id="root"></div>
  </body>

Upvotes: 4

Related Questions