context!: React.ContextType<typeof MyContext> @deprecated — if used without a type annotation, or without static contextType @see — https ://reactjs.org/docs/legacy-context.html 'context' is deprecatedts(6385)

g h 716 Reputation points
2020-12-15T07:44:15.967+00:00

I'm building a SPFX React WebPart and use this line in Render function:

<p className={ styles.description }>{escape(this.context.pageContext.web.title)}</p>

However got this error message:

48187-snipaste-2020-12-15-15-41-57.png

Any fix to this issue ?

SharePoint Server Development
SharePoint Server Development
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Development: The process of researching, productizing, and refining new or existing technologies.
1,569 questions
0 comments No comments
{count} votes

Accepted answer
  1. Jerryzy 10,561 Reputation points
    2020-12-16T07:19:27.037+00:00

    Hi @g h ,

    In IWebPartNameProp.ts, add context like this:

    import { WebPartContext } from "@microsoft/sp-webpart-base";  
      
    export interface IJerryTestWpProps {  
      description: string;  
      context:WebPartContext;  
    }  
    

    In WebPartNameWebPart.ts,add context like this:

      public render(): void {  
        const element: React.ReactElement<IJerryTestWpProps> = React.createElement(  
          JerryTestWp,  
          {  
            description: this.properties.description,  
            context:this.context  
          }  
        );  
      
        ReactDom.render(element, this.domElement);  
      }  
    

    In WebPartName.tsx, get web title from context like this:

    <p className={ styles.description }>{escape(this.props.context.pageContext.web.title)}</p>  
    

    If an Answer is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful