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)

Question

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:

Any fix to this issue ?

Answer 1

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.