SharePoint SPFX webpart in react js

Question

I nee when i select value in KPI Group Dropdown then value in KPI Sub Group Dropdown value show. but After i select value in KPI Group Dropdown value not show in KPI Sub Group, After i select value second time in KPI Grop Dropdown then value in KPI Sub Group show previous values not show current values in KPI Sub Group.

import * as React from 'react';
import styles from './SoxTbScopingChecker.module.scss';
import { ISoxTbScopingCheckerProps } from './ISoxTbScopingCheckerProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Dropdown, IDropdownOption, Pivot, PivotItem, PrimaryButton, TextField, values } from 'office-ui-fabric-react';
import { sp } from 'sp-pnp-js';
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from '@pnp/sp/items';
interface SoxTbScopingChecker_states {
  KPIGroup: IDropdownOption;
  KPISubGroup: IDropdownOption;
  KPIPrinciple: IDropdownOption;
  KPIParameter: IDropdownOption;
  KPISubTitle: string,
  KPIShortDis: string,
  KPIAddDis: string,
  Attachments: File;
}
export default class SoxTbScopingChecker extends React.Component<ISoxTbScopingCheckerProps, SoxTbScopingChecker_states> {
  private KPIGroupOptions: IDropdownOption[] = [];
  private KPISubGroupOptions: IDropdownOption[];
  private KPIPrincipleOptions: IDropdownOption[] = [];
  private KPIParameterOptions: IDropdownOption[] = [];
  constructor(props: Readonly<ISoxTbScopingCheckerProps>) {
    super(props);
    this.state = {
      KPIGroup: undefined,
      KPISubGroup: undefined,
      KPIPrinciple: undefined,
      KPIParameter: undefined,
      KPISubTitle: '',
      KPIShortDis: '',
      KPIAddDis: '',
      Attachments: new File([""], "", { type: "text/plain", })
    }
  }
  public async componentDidMount() {
    let kpigroupitems = await sp.web.lists.getByTitle("KPIGroup").items.select("*").get();
    kpigroupitems.forEach(data => { this.KPIGroupOptions.push({ key: data.Id, text: ${data.Title} }); });
    console.log(kpigroupitems);
    // let kpiparameter = await sp.web.lists.getByTitle("KPI_Information").items.select("KPIparameter").get();
    let kpiparameter = await sp.web.lists.getByTitle('KPI_Information').fields.getByInternalNameOrTitle("KPIparameter").select(Choices,ID).get();
    //kpiparameter['Choices'].forEach(data => { this.KPIGroupOptions.push({ key: data.Id, text: ${data.Title} }); });
    kpiparameter['Choices'].forEach(data => { this.KPIParameterOptions.push({ key: data, text: data }); });
    console.log(kpigroupitems);
  }
  private onDropDownChange = (fieldName: string, event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, item: IDropdownOption) => {
    try {
      switch (fieldName) {
        case 'kpigroup': this.setState({ KPIGroup: item }, () => { this.fetchkplsubgroup(item); });
          break;
        case 'kpisubgroup': this.setState({ KPISubGroup: item }, () => { this.fetchkplprinciple(item); });
          break;
        case 'kpiprinciple': this.setState({ KPIPrinciple: item }, () => { this.changekpi(); });
          break;
        case 'kpiparameter': this.setState({ KPIParameter: item });
          break;
      }
    } catch (error) {
      console.log(${fieldName} Change Error);
    }
  }
  private onTextChange = (fieldName: string, event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    try {
      switch (fieldName) {
        case 'kpisubtitle': this.setState({ KPISubTitle: event.target['value'] });
          break;
        case 'kpishortdes': this.setState({ KPIShortDis: event.target['value'] });
          break;
        case 'kpiadddis': this.setState({ KPIAddDis: event.target['value'] });
          break;
      }
    } catch (error) {
      console.log(${fieldName} Change Error);
    }
  }
  private changekpi() {
    //this.KPISubGroupOptions = [];
    //this.KPISubGroupOptions = [];
  }
  private async fetchkplprinciple(item: IDropdownOption) {
    //let kpiprincipleitems = await sp.web.lists.getByTitle("KPISubGroup").items.select("*,KPIGroupTitle/Title,KPIGroupTitle/Id").filter("KPIGroupTitleId eq '" + item.key + "'").expand('KPIGroupTitle').get();
    let kpiprincipleitems = await sp.web.lists.getByTitle("KPIPrinciple").items.select("*,KPISunGroupTitle/Title,KPISunGroupTitle/Id").filter("KPISunGroupTitleId eq '" + item.key + "'").expand('KPISunGroupTitle').get();
    kpiprincipleitems.forEach(data => { this.KPIPrincipleOptions.push({ key: data.Id, text: ${data.Title} }); });
    console.log(kpiprincipleitems);
    //this.KPIPrincipleOptions = [];
  }
  private async save() {
    var data = {
      "Attachments": this.state.Attachments
    };
    let dataobject = {
      //KPIGroupTitle: '',
      KPIGroupTitleId: this.state.KPIGroup ? this.state.KPIGroup.key : 0,
      KPISubGroupTitleId: this.state.KPISubGroup ? this.state.KPISubGroup.key : 0,
      KPIPrincipleTitleId: this.state.KPIPrinciple ? this.state.KPIPrinciple.key : 0,
      KPIparameter: this.state.KPIParameter ? this.state.KPIParameter.key : '',
      KPISubTitle: this.state.KPISubTitle,
      KPIShortDescription: this.state.KPIShortDis,
      KPIAdditionalDescription: this.state.KPIAddDis,
    }
    await sp.web.lists.getByTitle("KPI_Information").items.add(dataobject).then(res => {
      console.log('All Items Added');
      res.item.attachmentFiles.add(data.Attachments.name, data.Attachments);
    });
  }
  private async read(item: string) {
    const newID = await sp.web.lists.getByTitle("KPI_Information").items.select("*, KPIGroupTitle/Title,KPIGroupTitle/Id,KPISubGroupTitle/Title,KPISubGroupTitle/Id,KPIPrincipleTitle/Title,KPIPrincipleTitle/Id").filter(KPISubTitle eq '${item}').expand("KPIGroupTitle,KPISubGroupTitle,KPIPrincipleTitle").get().then((result) => {
      this.setState({
        KPISubTitle: result[0].KPISubTitle,
        KPIShortDis: result[0].KPIShortDescription,
        KPIAddDis: result[0].KPIAdditionalDescription,
        KPIGroup: result[0].KPIGroupTitle ? { key: result[0].KPIGroupTitle.Id, text: result[0].KPIGroupTitle.Title } : undefined,
        KPISubGroup: result[0].KPISubGroupTitle ? { key: result[0].KPISubGroupTitle.Id, text: result[0].KPISubGroupTitle.Title } : undefined,
        KPIPrinciple: result[0].KPIPrincipleTitle ? { key: result[0].KPIPrincipleTitle.Id, text: result[0].KPIPrincipleTitle.Title } : undefined,
        KPIParameter: result[0].KPIparameter ? { key: result[0].KPIparameter, text: result[0].KPIparameter } : undefined,
      });
    });
    console.log(newID);
  }
  private async delete() {
    if (this.state.KPISubTitle !== '' || this.state.KPISubTitle !== null) {
      const newID = await sp.web.lists.getByTitle("KPI_Information").select("*").items.filter(KPISubTitle eq '${this.state.KPISubTitle}').get();
      await sp.web.lists.getByTitle("KPI_Information").items.getById(newID[0].Id).delete().then(result => {
        console.log("Item deleted");
      });
    }
  }
  private async update() {
    const newID = await sp.web.lists.getByTitle("KPI_Information").select("*").items.filter(KPISubTitle eq '${this.state.KPISubTitle}').get();
    await sp.web.lists.getByTitle('KPI_Information').items.getById(newID[0].Id).update({
      KPIShortDescription: this.state.KPIShortDis,
      KPIAdditionalDescription: this.state.KPIAddDis,
      KPISubTitle: this.state.KPISubTitle,
    }).then(async (result: any) => {
      //resolve(result);
      console.log("my update result" + result);
    });
  }
  private handleFileUpload = (event) => {
    var file = event.target.value;
    var file2 = (document.getElementById("studyAttachment") as HTMLInputElement).files[0];
    var fileName = file.split("").pop();
    document.getElementById("fileName").innerHTML = fileName;
    var reader = new FileReader();
    var dataURL;
    reader.onload = () => {
      dataURL = reader.result;
      console.log(dataURL)
    };
    console.log("fileInfo: " + fileName);
    reader.readAsDataURL(file2);
    this.setState({ Attachments: new File([dataURL], file2.name, { type: file2.type }) });
  }
  public render(): React.ReactElement<ISoxTbScopingCheckerProps> {
    return (
      
        <>
          <React.Fragment>
            
              
                
                  
                    <Dropdown
                      label="KPI Group"
                      selectedKey={this.state.KPIGroup ? this.state.KPIGroup.key : ''}
                      options={this.KPIGroupOptions}
                      onChange={this.onDropDownChange.bind(this, 'kpigroup')}
                    //errorMessage={this.state.GLaccountcaptionMessage}
                    //required
                    //disabled={reviewType}
                    />
                  
                  
                    <Dropdown
                      label="KPI Sub Group"
                      selectedKey={this.state.KPISubGroup ? this.state.KPISubGroup.key : ''}
                      options={this.KPISubGroupOptions}
                      onChange={this.onDropDownChange.bind(this, 'kpisubgroup')}
                    //errorMessage={this.state.GLaccountcaptionMessage}
                    //required
                    />
                  
                
                
                  
                    <Dropdown
                      label="KPI Principle"
                      selectedKey={this.state.KPIPrinciple ? this.state.KPIPrinciple.key : ''}
                      options={this.KPIPrincipleOptions}
                      onChange={this.onDropDownChange.bind(this, 'kpiprinciple')}
                    //errorMessage={this.state.GLaccountcaptionMessage}
                    //required
                    //disabled={reviewType}
                    />
                  
                  
                    <Dropdown
                      label="KPI Parameter"
                      selectedKey={this.state.KPIParameter ? this.state.KPIParameter.key : ''}
                      options={this.KPIParameterOptions}
                      onChange={this.onDropDownChange.bind(this, 'kpiparameter')}
                    //errorMessage={this.state.GLaccountcaptionMessage}
                    //required
                    />
                  
                
                
                  
                    <TextField
                      label="Search By Text"
                    //onChange={this.onDropDownChange.bind(this, 'glaccount')}
                    //errorMessage={this.state.GLaccountcaptionMessage}
                    //required
                    //disabled={reviewType}
                    />
                  
                
                
                  
                    <TextField
                      label="KPI Sub Title"
                      value={this.state.KPISubTitle}
                      //options={''}
                      onChange={this.onTextChange.bind(this, 'kpisubtitle')}
                    //errorMessage={this.state.GLaccountcaptionMessage}
                    //required
                    />
                  
                
                
                  
                    <TextField
                      label="KPI Short Description"
                      placeholder='KPI Short Description'
                      value={this.state.KPIShortDis}
                      //required
                      multiline
                      maxLength={30000}
                      autoAdjustHeight
                      resizable={false}
                      onChange={this.onTextChange.bind(this, 'kpishortdes')}
                    />
                  
                
                
                  
                    <TextField
                      label="KPI Additional Description"
                      placeholder='KPI Additional Description'
                      value={this.state.KPIAddDis}
                      //required
                      multiline
                      maxLength={30000}
                      autoAdjustHeight
                      resizable={false}
                      onChange={this.onTextChange.bind(this, 'kpiadddis')}
                    />
                  
                  
                
                
                
                  <label>Attachment if any:</label>
                  
                    <input type="file" className="custom-file-input" id="studyAttachment" onChange={this.handleFileUpload} required />
                    <label className="custom-file-label" id="fileName">Choose file</label>
                  
                
                
              
            
          </React.Fragment>
        </>
        <PrimaryButton
          style={{ margin: "0px 15px 0px 0px" }}
          text="Create"
          onClick={() => this.save()}
        />
        <PrimaryButton
          style={{ margin: "0px 15px 0px 0px" }}
          text="Read"
          onClick={() => this.read(this.state.KPISubTitle)}
        />
        <PrimaryButton
          style={{ margin: "0px 15px 0px 0px" }}
          text="Update"
          onClick={() => this.update()}
        />
        <PrimaryButton
          style={{ margin: "0px 15px 0px 0px" }}
          text="Delete"
          onClick={() => this.delete()}
        />
      
    );
  }
  private async fetchkplsubgroup(item: IDropdownOption) {
    this.KPISubGroupOptions = [];
    const results = await sp.web.lists.getByTitle("KPISubGroup").items.select("*,KPIGroupTitle/Title,KPIGroupTitle/Id").filter("KPIGroupTitleId eq '" + item.key + "'").expand('KPIGroupTitle').get();
    //result.forEach(data => { this.KPISubGroupOptions.push({ key: data.Id, text: ${data.Title} }); });
    results.forEach(data => { 
      this.KPISubGroupOptions.push({ key: data.Id, text: data.Title, data: data }); 
    });
    console.log(this.KPISubGroupOptions);
  }
}

I nee when i select value in KPI Group Dropdown then value in KPI Sub Group Dropdown value show. but After i select value in KPI Group Dropdown value not show in KPI Sub Group, After i select value second time in KPI Grop Dropdown then value in KPI Sub Group show previous values not show current values in KPI Sub Group.

Answer 1

Hi @Pratap Bangosavi

I will recommend you to use fluent-ui-react to reach your requirement. You can refer to following code

import * as React from 'react'
import { Dropdown } from '@fluentui/react'

const inputItems = [
  'Bruce Wayne',
  'Natasha Romanoff',
  'Steven Strange',
  'Alfred Pennyworth',
  `Scarlett O'Hara`,
  'Imperator Furiosa',
  'Bruce Banner',
  'Peter Parker',
  'Selina Kyle',
]

export const selectors = {
  triggerButtonClass: Dropdown.slotClassNames.triggerButton,
}

const DropdownExample = () => (
  <Dropdown multiple items={inputItems} placeholder="Select your heroes" />
)

export default DropdownExample

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.