New to TypeScript and this feels like it should be really simple but I can't quite get the syntax happy!

Very simple ponent:

import * as React from "react";
import ControlArea from "./ControlArea";

interface IControlAreaProps {
  wele?: any;
}

export class Layout extends React.Component<IControlAreaProps> {
  public render() {
    return (
        <ControlArea wele="This is the control area"/>
    );
  }
}

I'm getting the TS error Property 'wele' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ControlArea> & Readonly<{ children?: ReactNode; }>...'.

Any point in the right direction would be very much appreciated.

New to TypeScript and this feels like it should be really simple but I can't quite get the syntax happy!

Very simple ponent:

import * as React from "react";
import ControlArea from "./ControlArea";

interface IControlAreaProps {
  wele?: any;
}

export class Layout extends React.Component<IControlAreaProps> {
  public render() {
    return (
        <ControlArea wele="This is the control area"/>
    );
  }
}

I'm getting the TS error Property 'wele' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ControlArea> & Readonly<{ children?: ReactNode; }>...'.

Any point in the right direction would be very much appreciated.

• javascript
• reactjs
• typescript

1 Answer 1

Your mistake here is that you're adding the interface to the Layout ponent when you should be adding them to the ControlArea ponent

interface IControlAreaProps {
  wele?: any
}

export default class ControlArea extends React.Component<IControlAreaProps> {
  // Your ControlArea code
}