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>
)
}
}
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>
)
}
}