Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
    )
  }
  }
like image 287
Dev.D Avatar asked Jan 04 '20 22:01

Dev.D


People also ask

Is there a state property for intrinsic attributes in react typescript?

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.

What is the difference between typescript and react?

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.

Can I use React hooks with typescript?

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.

Why is 'intrinsicattributes & objectdto' not assignable to my function?

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'


1 Answers

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>
    )
  }
}
like image 175
Alexander Vidaurre Arroyo Avatar answered Oct 02 '22 03:10

Alexander Vidaurre Arroyo