Error when passing parameters in components in react using Typescript

Question

When I pass the value parameter from App component to App2 component in react using typescript, it is giving an error

Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<App2> & Readonly<{ children?: ReactNode; }> & Read...

The code of App.tsx is

import * as React from "react";
import './App.css';
 import App2 from './App2';


class App extends React.Component<any,any>{

  public render(){
    return(
      <div>
          <h1>
            <App2 value = {5}/>
          </h1>
        </div>
    )
  }

}
export default App;

and the code of App2 component is :-

import * as React from "react";


class App2 extends React.Component{

    public render(){
        return(
            <div>
            <h4>Hello world</h4>
           </div>

        )
    }
}
export default App2;

Titian Cernicova-Dragomir · Accepted Answer · 2018-07-16 14:18:50Z

3

You need to specify the type for the properties to tell the compiler what properties are valid on the App2 component and what their types are:

class App2 extends React.Component<{ value: number }>{

  public render() {
    return (
      <div>
        <h4>Hello world</h4>
      </div>

    )
  }
}

answered Jul 16, 2018 at 14:18

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Titian Cernicova-Dragomir Over a year ago

@Rohitchauhan Don't forget to mark as answered if it was useful :)

Rohit chauhan Over a year ago

Again Thanks Titian, your answer is useful and it worked for me. :)

Collectives™ on Stack Overflow

Error when passing parameters in components in react using Typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related