Error on SPfx connecting to sharepoint context - sharepoint

Question

I'm following the steps on the MS site https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint
however, on the step that would enable the SPFx to get the current context of the page I'm blocked by an error, this is my code on the HelloWorld.tsx
return (
<div className={ styles.helloWorld }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<p className={ styles.description }>{this.props.test2}</p>
<p className={ styles.description }>{escape(this.context.pageContext.web.title)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);

Answer 1

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>
Reference:
How to retrieve pageContext in SPFx?