Type '{ description: String; }' is missing the following properties from type 'IOrder-CodePudding

i dont know why this error occurs. it shows Type '{ description: String; }' is missing the following properties from type 'IOrderFormWithReactProps': context, siteUrlts(2769)

***OrderFormreactWithWebpart.ts file:***


import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';

import * as strings from 'OrderFormWithReactWebPartStrings';
import OrderFormWithReact from './components/OrderFormWithReact';
import { IOrderFormWithReactProps } from './components/IOrderFormWithReactProps';
import { description } from 'OrderFormWithReactWebPartStrings';
export interface IOrderFormWithReactWebPartProps {
  description: String;
  context: WebPartContext;
  siteUrl: any;
}


export default class OrderFormWithReactWebPart extends BaseClientSideWebPart<IOrderFormWithReactWebPartProps> {

  public render(): void {
    const element: React.ReactElement<IOrderFormWithReactProps> = React.createElement(
      OrderFormWithReact,
      {
        description: this.properties.description
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }


***IOrderFormWithReactProps.ts file***

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface IOrderFormWithReactProps {
description: String;
context: WebPartContext;
siteUrl: any;

}

this is the interface for that props file

CodePudding user response：

Your OrderFormWithReact requires description, context and siteUrl. You are only giving it description.

const element: React.ReactElement<IOrderFormWithReactProps> = React.createElement(
  OrderFormWithReact,
  {
    description: this.properties.description
  }
);

Try this. It just passes the properties of OrderFormWithReactWebPart on to OrderFormWithReact. (So it requires that the properties of OrderFormWithReactWebPart include context and siteUrl.)

const element: React.ReactElement<IOrderFormWithReactProps> = React.createElement(
  OrderFormWithReact,
  this.properties
);