Getting webpart panel properties in .tsx file

Question

I have created a basic SPFx webpart. Essentially the I'm making a call to a 3rd party API and getting some values back and then rendering the results on the screen.

The .tsx file is below.

import * as React from 'react';
import { GraphQLClient} from 'graphql-request';
import ReactHtmlParser from 'react-html-parser';

import { CentralContentProps } from './CentralContentProps'; 
import { CentralContentState } from './CentralContnetState';

import { escape } from '@microsoft/sp-lodash-subset';

export class CentralContent extends React.Component<CentralContentProps, CentralContentState>
{
    constructor(props: CentralContentProps, state: CentralContentState)
    {
        super(props);
        this.state = {items: [], };
    }

    public async getItems()
    {
        const endpoint = 'https://myEndPoint';

        const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
          authorization: 'myToken',
        }
      });

        var centralContentId = "cl56ufet793em0bmutfnd40e2";

        var query = 'query {  uoCIntranetInABoxPages(where: {id: "' + centralContentId + '"}) {    body {      html    }     headline endPublicationDateTime category subCategory updatedAt publicationDateTime  } } ';
        var data = await graphQLClient.request(query); 

        var updatedDateValue = data.theValue[0].updatedAt;
        var htmlValue = data.theValue[0].body.html;
        var headingValue = data.theValue[0].headline;
        var subCategoryValue = data.theValue[0].subCategory;
        var categoryValue = data.theValue[0].category;
        var endPublicationDateTimeValue = data.theValue[0].theValue;
        var publicationDateTimeValue = data.theValue[0].publicationDateTime;

        var dataForProps = [];

        dataForProps.push(updatedDateValue, htmlValue, headingValue, subCategoryValue, categoryValue, endPublicationDateTimeValue, publicationDateTimeValue);

        this.setState({items: dataForProps});

    }
    public componentDidMount() 
    {
        this.getItems();    
    }

    public render(): React.ReactElement<CentralContentProps>
    {
        var centralContentToDisplayArray = [];
        centralContentToDisplayArray = this.state.items;
        
        return <div>
         <div>
            {ReactHtmlParser(centralContentToDisplayArray[1])}
         </div>
         </div>
    }
}

Everything is working. However I'm having trouble working out how to access the WebPart Panel Description to get the value from the .tsx file.

As you can see the following line I've hardcoded the ID i'm passing in the query and I want to get this from the Description field (I'll change the name later)

var centralContentId = "cl56ufet793em0bmutfnd40e2";

Appreciate it may not be the best way of coding this. Any help greatly appreciated.

Answer 1

Use code like below in render method of your main web part .ts file:

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

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

In CentralContentProps.ts file, add description this:

export interface CentralContentProps {
  description: string;
}

Then, in your .tsx file you can use it like:

var centralContentId = this.props.description;