Creating new items in sharepoint list with SPFx

Hi
I am building an web part in sharepoin online that render data from a list.
All the rendering is working fine, now I want to go to the next level and allow the user create new items direct from the web part.
For that I am using the Panel component that render a serie of text and dropdown components.
Beside that I have a method that create the new item in the list.
what I need help with is find the way to pass the data that the user write to the method that create the item.

This is how the panel looks like:

<Panel
              isOpen={this.state.showPanel}
              type={PanelType.medium}
              onDismiss={this._hidePanel}
              headerText="Create new agreement"
              closeButtonAriaLabel="Close"
              onRenderFooterContent={this._onRenderFooterContent}
            >
              <div>
              <Label>Agreement Name:</Label>
              <TextField underlined required placeholder="Please enter agreement name" />

              <TaxonomyPicker allowMultipleSelections={true}
                termsetNameOrID="6507b024-c9ac-4412-b768-f59c3ad7dcb3"
                panelTitle="Select Customer"
                label="Customer"
                context={this.props.context}
                onChange={this.onTaxPickerChange}
                isTermSetSelectable={false} />

              <Dropdown 
                placeholder="Select an option" 
                label="Agreement type" 
                options={[
                  { key: 'CustomerAgreement', text: 'Customer Agreement' },
                  { key: 'PartnerAgreement', text: 'Partner Agreement' },
                  { key: 'SubcontractorAgreement', text: 'Subcontractor Agreement' },
                ]}
                onRenderCaretDown={this._onRenderCaretDown}  />
               </div>
            </Panel>

Here is the method that render the Save and cancel controllers of the panel:

private _onRenderFooterContent = () => {
    return (
      <div>
        <PrimaryButton onClick={this._showPanel} style={{ marginRight: '8px' }}>
          Save
        </PrimaryButton>
        <DefaultButton onClick={this._hidePanel}>Cancel</DefaultButton>
      </div>
    );
  };

and this is the one that create the item in the list:

private _createItem(): void {
    sp.web.lists.getByTitle('Agreement Database').items.add({
      'Title': `From form`
    }).then((result: ItemAddResult): void => {
      const item: IList = result.data as IList;
      console.log(`Item created: '${item.Title}'` );
    }, (error: any): void => {
      console.log('Error: ' + error);
    });
  }

So my question is how can I pass the text written by the user in the textfield component or the value choosed in the dropdown component to the _createItem() method?

Best regards
Americo

You may have found a solution. This may help someone else.

You can use the onChange event in the Textfield component to get the text entered and save it to a state or a global variable

<TextField underlined required placeholder="Please enter agreement name"
          errorMessage={this.state.errMessage}
          **onChange={(event : any )=>{**
**                 this.setState({ **
**                        textValue: event.target.value**
**                 });**
}}/>

and when the save function is called use the same state or global variable as below

private _createItem(): void {
    sp.web.lists.getByTitle('Agreement Database').items.add({
      'Title': **this.state.textValue**
    }).then((result: ItemAddResult): void => {
      const item: IList = result.data as IList;
      console.log(`Item created: '${item.Title}'` );
    }, (error: any): void => {
      console.log('Error: ' + error);
    });
  }

Hope this helps

Thank you :smiley: