How to resolve typescript error TS2339: Property 'XXX' does not exist on type 'IntrinsicAttributes & ...?

user_5390873 0
Viewed 2087

In my typescript/reactjs app I am trying to pass in a property called test like this, this is part of the index.tsx:

ReactDOM.render(
  <Provider store={getStore()}>
    <BrowserRouter>
      <App test={1} />
    </BrowserRouter>
  </Provider>,
  document.getElementById('content')
);

In my app.tsx I have:

export class App extends React.Component<any,{}>{
  constructor(props){
    super(props); 
  }

  render(){
    ..
  }
}

When I run the app I get this error:

ERROR in ./src/index.tsx
(24,12): error TS2339: Property 'test' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

How can I make sure this error is resolved or how can I pass in a property on my App component?

typescript reactjs javascript
3 Answers

This appears to be a larger issue with ReactRedux connect, and Typescript, there has been such a problem finding a workable solution, that our team is seriously considering dropping Typescript in our react apps because of it.

Admin1

You need to define an interface for your component's Props and pass that as a type argument to React.Component. This way, App will expect to receive a prop called test. For example:

interface Props {
    test: <whatever type test is>
}

class App extends React.Component<Props, {}> {

    // your component code
}

There is some notorious discussion around connect with TS. You may check out this SO post for help: Typescript + React/Redux: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

user_67270530

Make sure the component name starts with capital letter

user_27816360
Related