Typescript object literal may only specify known properties error

Question

I am new to typescript/react. I have this type error below which I am unsure on how to tackle. Can anybody enlighten me?

Error: [tsc] src/webparts/jsonFeed/components/JsonFeed.tsx(40,8): error TS2322: Type '{ postOrLinkedIn: any; }' is not assignable to type 'ReactElement ReactElement ReactElement

JsonFeed.tsx

export default class JsonFeed extends React.Component<IJsonFeedProps, IJsonFeedState> {

  // State needed for the component
  constructor(props) {
    super(props);
    this.state = {
      description: this.props.description,
      posts: [],
      profile: {},
      isLoading: true,
      jsonUrl: this.props.jsonUrl, // This was just for testing purposes
      postCount: this.props.postCount,
      errors: null,
      error: null,
      listName: this.props.listName, // This will actually select the list
      item: this.props.item, // This will actually select the list
    };
  }

  // Renders to the browser
  public render(): React.ReactElement<IJsonFeedProps> {

    let postOrLinkedIn;
    if (this.props.item !== 'linkedin') {
      postOrLinkedIn = <Posts />;
    } else {
      postOrLinkedIn = <Linkedin />;
    }  

    // What we render
    return (
      {postOrLinkedIn}
    );
  }

}

IJsonFeedProps:

export interface IJsonFeedProps {
  description?: string;
  postCount?: number;
  jsonUrl?: string;
  listName?: string;
  item?: string;
  posts?: any;
  postOrLinkedIn?: boolean;
}

Answer 1

You have specified in IJsonFeedProps that postOrLinkedIn is either undefined or a boolean. Whereas in the render function you are returning a JSX.Element .