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>
)
}
}
State using React Typescript: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes Ask Question Asked1 year, 8 months ago Active1 year, 8 months ago Viewed25k times 9 1 I am new to React with Typescript and I am getting an error stating: No overload matches this call.
TypeScript and React are two of the most popular technologies out there today. You can use them together to build amazing projects taking the benefits from both. React makes it easy to build user interfaces and TypeScript type checks all of the JavaScript to help prevent errors.
React makes it easy to build user interfaces and TypeScript type checks all of the JavaScript to help prevent errors. In this article, we will take a look at how to use the most popular and useful React hook, useState, with TypeScript.
The type system is trying to match the properties with the first parameter of your function, which is of type ObjectDto. That's why you get error is not assignable to type 'IntrinsicAttributes & ObjectDto'
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>
)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With