Forum Discussion

jay chadwell's avatar
jay chadwell
Copper Contributor
Dec 23, 2020

Unable to pass data from React component to webpart ts file

I have been unable to pass data from a react component back to the webpart ts using a function passed into props. I created the simplest example of this and continue to get the following error:

TypeError: Cannot read property 'props' of undefined

 

Here is my webpart files

 

ISync1Props.ts

 

export interface ISync1Props {
  description: string;
  context: any;
  _dataSelected: any;
}
 
Sync1.tsx
 
import * as React from 'react';
import styles from './Sync1.module.scss';
import { ISync1Props } from './ISync1Props';
import { escape } from '@microsoft/sp-lodash-subset';

export default class Sync1 extends React.Component<ISync1Props,  {}> {

  constructor(props: ISync1Props) {
    super(props);
  }


  public render(): React.ReactElement<ISync1Props> {
    return (
      <div className={ styles.sync1 }>
        <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>
              <button onClick={this.passData}>Test</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
  private passData() {
    var s = "My Data";
    console.log("passingData");
    this.props._dataSelected({ theData: s });
  }
}
 
Sync1WebPart.ts
 
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'Sync1WebPartStrings';
import Sync1 from './components/Sync1';
import { ISync1Props } from './components/ISync1Props';

export interface ISync1WebPartProps {
  description: string;
}

export interface ISelectedData {
  theData: string;
}

export default class Sync1WebPart extends BaseClientSideWebPart<ISync1WebPartProps> {


  private _selectedData: ISelectedData;

  private _dataSelect = (data: ISelectedData😞 void => {
    this._selectedData = data;
    console.log("selectdData:", this._selectedData);
  }


  public render(): void {
    const element: React.ReactElement<ISync1Props> = React.createElement(
      Sync1,
      {
        description: this.properties.description,
        context: this.context,
        _dataSelected: this._dataSelect      
      }
    );

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

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }


  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}
 
 

Resources