1

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.

Titus Annadurai
  • 11
  • 1
  • 4

1 Answers1

1

As per @fluentui/react-northstar@0.59.0 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

Lakshmaji
  • 899
  • 2
  • 14
  • 30
  • Thank you for this, if it wasn't for your answer I would be pulling my hair out all day, can you refer where in the documentation this is stated please, so I know where to find it next time? – StackEng2010 Apr 29 '22 at 11:18
  • @StackEng2010 Lookedup into type definitions file. [Here](https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Dropdown/Dropdown.types.ts#L51) it is if you need more details – Lakshmaji Jul 05 '22 at 08:54