State using React Typescript: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Question

I am new to React with Typescript and I am getting an error stating :

No overload matches this call. Overload 1 of 2, '(props: Readonly<{}>): IndexPage', gave the following error.

Type '{ notes: { 1: { _id: number; title: string; body: string; updatedAt: Date; }; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'notes' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Overload 2 of 2, '(props: {}, context?: any): IndexPage', gave the following error. Type '{ notes: { 1: { _id: number; title: string; body: string; updatedAt: Date; }; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'notes' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

  **App.tsx**
//import statements 

  type Note={
notes: {
    1: {
_id: number;
body:string;
title:string;
updatedAt: Date

    }
} }
type State={notes: {[key:number]: Note} }
class App extends React.Component <State> {
state={
    notes: {
        1: {
            _id:1,
            title: "hello world",
            body: "this is the body",
            updatedAt:new Date()
        }
      }
   }
   render(){
   return (
    <div className="App">
        <Nav/>
        <Headers/>
        <IndexPage notes = {this.state.notes}/>

    </div>
  );
}
 }
export default App;

====================================================== Index.tsx:

import React from 'react';

export default class IndexPage extends React.Component{
render(){
    const notes=Object.values(this.props.notes);
    return(
        <div>
            <h1> posts</h1>
            <h2> {notes[0].title}</h2>
        </div>
    )
  }
  }

Cutcheon

Answer 1

You have to specify Props and State types on your components:

App

type Note = {
  _id: number,
  title: string,
  body: string,
  updatedAt: Date
}
type Props = {/*props properties*/}
type State = {
  notes: {[key:number]: Note}
}
class App extends React.Component<Props, State>{
  state={
    notes: {
        1: {
            _id:1,
            title: "hello world",
            body: "this is the body",
            updatedAt:new Date()
        }
      }
   }
   render(){
     return (
      <div className="App">
        <Nav/>
        <Headers/>
        <IndexPage notes = {this.state.notes}/>
    </div>
    );
  }
}
export default App;

IndexPage

//You should extract Note in other file and import it on both components
type Note = {
  _id: number,
  title: string,
  body: string,
  updatedAt: Date
}
type Props = {
  notes: {[key:number]: Note}
}
export default class IndexPage extends React.Component<Props>{
  render(){
    const notes=Object.values(this.props.notes);
    return(
        <div>
            <h1> posts</h1>
            <h2> {notes[0].title}</h2>
        </div>
    )
  }
}

Porosity

I have done that and re-uploaded my code. Still the same error. could you check why? – Cutcheon

I edited my answer. You have to specify Props (and state if necessary) on all components – Porosity

Done! Check it now – Porosity

I had a typo on Note (I wrote updateAt instead of updatedAt). Regarding extracting Note in another file, check this – Porosity

You are right. I understood that part, thats why I marked your answer as correct and solved :) – Cutcheon

Please check the link by you. If you could help with Routing part. I am going wrong with the props. I have added the doubt to the sandbox link by you. – Cutcheon

Let us continue this discussion in chat. – Cutcheon