How to retrieve term set in SPFx to use in a drop down select?

Question

I need a method of retrieving a particular term set (managed meta data) to use in an SPFx web part. Any idea how to do this?

Answer 1

Got a working solution:

public componentWillMount() {

     taxonomy.getDefaultSiteCollectionTermStore()
        .getTermSetById('6a488843-cebc-47b7-8606-e4e165e6fceb')
        .terms.get().then(
          Allterms => {
            console.log(Allterms);
            this.setState({terms: Allterms})
          }
        )
}


<select id="dropdown" onChange={this.handleDropdownChange}>
  { this.state.terms.map(term => {
      return <option value={term.Name.toLowerCase()}>{term.Name}</option>
    })
  }
</select>

Answer 2

The easiest way is to use the PnP Reusable Controls Taxonomy Picker. If you want to do it in the property pane, then you could also use the PnP Property Controls PropertyFieldTermPicker.

Both controls are relatively simple to add to your project and you can use the links above to see how to add the packages, import statements, and examples of how to use them.

Even if those controls aren't exactly what you are looking for, they are completely open source so you can borrow from the code and see examples of how this was done.