Passing number type as React component property

Question

I'm just getting started with React on asp.net core 2.0 (React project type). I'm having some trouble passing number types to my components. For example if I attempt to pass a number type (id) I get the error:

TS) Type '{id: boolean;}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes...

import * as React from 'react';
interface HelloWorldProps{
  name: string
  id: number
}
export class Greeting extends React.Component<HelloWorldProps, any> {
  render() {
      return <h1>Hello, {this.props.name}</h1>;
  }
}
export default Greeting;

When I attempt to render the component I get a TS error here...

<HelloWorld id=1 />

Without the id property it works fine.

Answer 1

You should surround the numeric value in curly braces as below -

<HelloWorld id={1} />