HI, I managed to resolve by updating this line: onClick={(e) => {this.onClickTag(e, item); return false;}} Now it is working!

Hi again, I finally I managed to make the dropdown react component work in my app. Now I have another dilema. I need to find a way to insert data into the dropdown. This is how my component looks like now: import * as React from 'react' ; import { Dropdown, DropdownMenuItemType } from "office-ui-fabric-react/lib/Dropdown" ; import { BaseComponent } from "office-ui-fabric-react/lib/Utilities" ; import styles from './Footer.module.scss' ; const footer = (props) => { return ( <div className={styles.footer}> <div className={styles.main}> <div className= "ms-Grid" > <div className= "ms-Grid-row" > <div className= "ms-Grid-col ms-sm6 ms-md8 ms-lg10" > <p>Other text</p> </div> <div className= "ms-Grid-col ms-sm6 ms-md4 ms-lg2" > <Dropdown placeHolder= "select a option" options={[ { key: 'Header' , text: 'Actions' , itemType: DropdownMenuItemType.Header }, { key: 'A' , text: 'Option a' , title: 'I am option a.' }, { key: 'B' , text: 'Option b' }, { key: 'C' , text: 'Option c' }, { key: 'D' , text: 'Option d' }, { key: 'E' , text: 'Option e' } ]} /> </div> </div> </div> </div> </div> ) } export default footer; I found a sample at MS home page that show how to create mockupDataProvider: import { ISPList } from './HelloWorldWebPart' ; export default class MockHttpClient { private static _items: ISPList[] = [{ Title: 'Mock List' , Id: '1' }, { Title: 'Mock List 2' , Id: '2' }, { Title: 'Mock List 3' , Id: '3' }]; public static get ( ): Promise<ISPList[]> { return new Promise<ISPList[]>((resolve) => { resolve(MockHttpClient._items); }); } } And how to implement it: private _renderList(items: ISPList[]): void { let html: string = '' ; items.forEach((item: ISPList) => { html += ` <ul class = "${styles.list}" > <li class = "${styles.listItem}" > <span class = "ms-font-l" >${item.Title}</span> </li> </ul>`; }); const listContainer: Element = this .domElement.querySelector( '#spListContainer' ); listContainer.innerHTML = html; } As you see in the code sample, it is using a forEach to loop through the objects in the ISPList array. My issue is how I replace this (from the dropdown component): options={[ { key: 'Header' , text: 'Actions' , itemType: DropdownMenuItemType.Header }, { key: 'A' , text: 'Option a' , title: 'I am option a.' }, { key: 'B' , text: 'Option b' }, { key: 'C' , text: 'Option c' }, { key: 'D' , text: 'Option d' }, { key: 'E' , text: 'Option e' } ]} With a loop like in the MS sample? Here is the link to the MS sample for more details: Link