0

I have a form with some values. Some of the fields in the form are dropdown fields. They get the dropdown values from SharePoint PNP/JS Rest Api call.

Then the values from the form are used to create a new item in a SharePoint list. That's working so far. After the new element has been created, I want to reset all the value for the dropdown field to a placeholder value. This should happen after the new item is created and the process is fullfilled.

I don't know how can I reset the the dropdown placeholder field.

Here is my code so far:

  1. the state variables are here:

    constructor(props:ISpTestingfilesystemProps,state:IListItemsState){
      super(props);
      this.state={
         dropdownItemsSubsystem:[],
         selectedValueSubsystem:""
      }
      this._spDataProvider= new SharePointDataProvider();
      this._sp= getSP();
    }
    
  2. Loading the dropdown field

     private getItemDataSubsystem(): void{
     this._spDataProvider.ReadListItems("Subsystem").then((items)=>{
     console.log("Subsystems: " + JSON.stringify(items));
     let dropdownItems: IDropdownOption[] =[];
      items.map(item =>{
              dropdownItems.push({
                 key: item.Id,
                 text: item.Title
              })
      });
      this.setState({
       dropdownItemsSubsystem:dropdownItems
      })
    
     })
    }
    
  3. Creating the item and then I want to reset my dropdown value

    public UpdateTSItem(listTitle: string, newItemId: number, urlFolder: string, docFileName: string){
    
    try{
           this._spDataProvider.UpdateTSItem(listTitle,newItemId,urlFolder,docFileName).then(()=>
    
     this.setState({
         showMessageSuccess: true,
         messageContent: "The new item has been created: ",
         createdItemLinkTS: urlFolder,
         displayNameTS: docFileName,
         newValueTSName: "",
         keyword1: "",
         keyword2:"",
         keyword3:""
    
     },()=>{
     console.log(this.state.messageContent);
     console.log("The process has been created successfully!");
     return;
     })
      )}catch(e){
     console.log(e);
       return e;
    }}
    

I hope you can help!

Thanks

2
  • Where is the code where you control the state of the drop-down list? Don't you store the currently selected value of the drop-down list somewhere? Aug 11, 2023 at 18:58
  • I added my state vale
    – Matthias
    Aug 11, 2023 at 19:10

1 Answer 1

0

Ok, I left a lot of your code out for brevity (so just imagine that all those function parameters are still there), but essentially what you need to do is, after the item is saved, you get your list of all the drop-down options from state, and when you are doing your final setState after saving, you set the selected value of the drop-down back to the first option, thus "resetting" the drop-down:

public UpdateTSItem() {
    try {

        // save the item
        this._spDataProvider.UpdateTSItem().then(() => {

            // after it's saved, get the full list of options from state
            const { dropdownItemsSubsystem } = this.state;

            this.setState({
                showMessageSuccess: true,
                // etc
                // etc
                // set the selected value to the first option
                selectedValueSubsystem: dropdownItemsSubsystem[0].key
                // etc
            }, () => {
                // your post save code
            })
        })
    } catch (e) {
        console.log(e);
        return e;
    }
}

Or, if you want it exactly like it is from your initial state, you could just set it back to an empty string:

selectedValueSubsystem: ""

In response to your comment

but my selected value is only a string not an array. I get an error message

I don't think you see what I'm doing there. I'm not setting the selected value to the whole array, I'm not doing this:

// this would be trying to set the selected value
// to be the entire array of options
this.setState({
    selectedValueSubsystem: dropdownItemsSubsystem
})

If you're getting an error because it's not the correct type (string), it might be because what I did was set it to the key property of the first item in the options array:

// this says "take the item at index 0 (the first item),
// and return the value of it's 'key' property"
dropdownItemsSubsystem[0].key

Now, looking back at where you build your dropdown options, you can see that the key property seems to be mapped to an item's Id, which is a number:

dropdownItems.push({
    key: item.Id,
    text: item.Title
})

So that might be where the problem is, if you try to set the string typed selectedValueSubsystem to be a number, you might get an error.

So then just change it to be the text property of the first drop-down option:

this.setState({
    selectedValueSubsystem: dropdownItemsSubsystem[0].text
})

I mean, is that how you set the selected value in whatever drop-down change handler you have controlling the selected value's state? Setting it to the text property of the newly selected option? I'm guessing it must be.

If you want to be extra explicit about it, you could add another line of code:

const { dropdownItemsSubsystem } = this.state;

const firstOption = dropdownItemsSubsystem[0];

this.setState({
    selectedValueSubsystem: firstOption.text
})
2
  • but my selected value is only a string not an array. I get an error message
    – Matthias
    Aug 11, 2023 at 19:54
  • updated my answer to address your comment Aug 11, 2023 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.