How to get selected value of a dropdown menu in ReactJS

Just use onChange event of the <select> object. Selected value is in e.target.value then.

By the way, it's a bad practice to use id="...". It's better to use ref=">.." http://facebook.github.io/react/docs/more-about-refs.html

Implement your Dropdown as

<select id = "dropdown" ref = {(input)=> this.menu = input}>
    <option value="N/A">N/A</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Now, to obtain the selected option value of the dropdown menu just use:

let res = this.menu.value;

It should be like:

import React, { useState } from "react";

export default function App() {
  const getInitialState = () => {
    const value = "Orange";
    return value;
  };

  const [value, setValue] = useState(getInitialState);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <select value={value} onChange={handleChange}>
        <option value="Orange">Orange</option>
        <option value="Radish">Radish</option>
        <option value="Cherry">Cherry</option>
      </select>
      <p>{`You selected ${value}`}</p>
    </div>
  );
}

you can see it here: https://codesandbox.io/s/quizzical-https-t1ovo?file=/src/App.js:0-572

The code in the render method represents the component at any given time. If you do something like this, the user won't be able to make selections using the form control:

<select value="Radish">
  <option value="Orange">Orange</option>
  <option value="Radish">Radish</option>
  <option value="Cherry">Cherry</option>
</select>

So there are two solutions for working with forms controls:

1. Controlled Components Use component state to reflect the user's selections. This provides the most control, since any changes you make to state will be reflected in the component's rendering:

example:

var FruitSelector = React.createClass({
    getInitialState:function(){
      return {selectValue:'Radish'};
  },
    handleChange:function(e){
    this.setState({selectValue:e.target.value});
  },
  render: function() {
    var message='You selected '+this.state.selectValue;
    return (
      <div>
      <select 
        value={this.state.selectValue} 
        onChange={this.handleChange} 
      >
       <option value="Orange">Orange</option>
        <option value="Radish">Radish</option>
        <option value="Cherry">Cherry</option>
      </select>
      <p>{message}</p>
      </div>        
    );
  }
});

React.render(<FruitSelector name="World" />, document.body);

JSFiddle: http://jsfiddle.net/xe5ypghv/

2. Uncontrolled Components The other option is to not control the value and simply respond to onChange events. In this case you can use the defaultValue prop to set an initial value.

   <div>
    <select defaultValue={this.state.selectValue} 
    onChange={this.handleChange} 
    >
       <option value="Orange">Orange</option>
       <option value="Radish">Radish</option>
       <option value="Cherry">Cherry</option>
     </select>
     <p>{message}</p>
     </div>       
   

http://jsfiddle.net/kb3gN/10396/

The docs for this are great: http://facebook.github.io/react/docs/forms.html and also show how to work with multiple selections.

UPDATE

A variant of Option 1 (using a controlled component) is to use Redux and React-Redux to create a container component. This involves connect and a mapStateToProps function, which is easier than it sounds but probably overkill if you're just starting out.