Search code examples
reactjsfluentui-react

Dropdown onChange method unable to get the selected value in fluentui/react-northstar


I am using fluentui/react-northstar library. I am using the dropdown component and using the onChange handler. I am unable to get the current selected value from the dropdown in the onChangeHandler method.

My code snippet

import React from "react";
import { Flex, Header, Dropdown } from '@fluentui/react-northstar';

class DropdownComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inputItems: [
                'Robert Tolbert',
                'Wanda Howard',
                'Tim Deboer',
                'Amanda Brady',
                'Ashley McCarthy',
                'Cameron Evans',
                'Carlos Slattery',
                'Carole Poland',
                'Robin Counts',
            ]
        }
        this.onChangeHandler = this.onChangeHandler.bind(this);
    }
    onChangeHandler(e){
        //e => null
        //Need to get the selected value from dropdown
    }
    render() {
      return (
         <section>
            <Flex column gap="gap.small">
                <Header as="h4" content="Object" />
                <Dropdown
                     items={this.state.inputItems}
                     placeholder="Select your object"
                     checkable 
                     onChange={(e) => this.onChangeHandler(e)}
                 />
            </Flex>
        </section>
      );
    }
}

export default DropdownComponent;

Can someone provide details on how to get the selected value from the onChange handler.


Solution

  • As per @fluentui/[email protected] documentation, the selected value from dropdown is being passed or provided in callback function second argument.

    i.e, with the following changes, it will work

          onChangeHandler(_, event) {
              console.log("selected value from dropdown ", event.value);
          }
    

    and

          <Dropdown
             items={this.state.inputItems}
             placeholder="Select your object"
             checkable
             onChange={this.onChangeHandler}
          />
    

    The working example can be found here, https://codesandbox.io/embed/lingering-sound-q2rw2?fontsize=14&hidenavigation=1&theme=dark