SPFX page context react

Question

I am developing a multiscreen webpart, I am using react framework. I am not able to get the context to load in the webpart file(.tsx) Below is the code so far. There were 2 issues initially, one was getting the page url without /sitepages when the webpart is deployed, I worked around this by passing my own web url manually as I was not able to get the url from the page context when the .ts file or oninit(it will load first so saving the context to be used in other .tsx files) Now I am trying to implement people picker control spfx where I need the content for that tag.

ReactGetItemsWebpart.ts

export default class ReactGetItemsWebPart extends 
BaseClientSideWebPart<IReactGetItemsProps> {
public onInit(): Promise < void> {
return super.onInit().then(_ => {
  sp.setup({
    spfxContext: this.context

  });
});}
public render(): void {
const element: React.ReactElement<IReactGetItemsProps > = React.createElement(
  ReactGetItems,
  {
    description: this.properties.description,
    spfxContext: this.context,
    siteUrl: this.context.pageContext.web.absoluteUrl
  },
);
console.log("render in .ts rrann");
ReactDom.render(element, this.domElement);

}

ReactGetItems

console.log(sp.web.lists.getById("45"));
console.log(this.props.spfxContext);

const item: any = await 
sp.web.lists.getByTitle("Listname").items.getById(parseInt(ID)).get();
reactHandler.setState({items:item});
<PeoplePicker
    context={this.props.spfxContext}....
import { WebPartContext } from "@microsoft/sp-webpart-base";

Interface

export interface IReactGetItemsProps {
description: string;
 spfxContext:WebPartContext;
 fieldRenderer?: JSX.Element;
 siteUrl:string; }

I am receiving the following errors: Uncaught (in promise) TypeError: Cannot read property 'spfxContext' of undefined

Below are the links I have referred to and tried
1. Github PnPJS latest 2.0 version
2. C# corner post- please refer to the comments section for my comments
3. GitHub - Link to the comment - -There is a comment here which basically resolves the issue, I have tried it but no luck

Please Help!!

Answer 1

Sample demo(hope this helps):

component interface definition:

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

export interface IReactSpFxProps {
  description: string,
  context: WebPartContext,
  userToken:string
}

Component(.tsx)

export default class ReactSpFx extends React.Component<IReactSpFxProps, IReactGetItemsState> {
...
public componentDidMount() {
...
var reactHandler = this;
    this.props.context.spHttpClient.get(`${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestList')/items?select=ID,Title,Address,Pic`,
      SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
        response.json().then((responseJSON: any) => {
          reactHandler.setState({
            items: responseJSON.value.sort()
          });
        });
      });