How to get selected value of a dropdown menu in ReactJS

Question

I\'m using react and I want to get the value of the selected option of a dropdown in react but I don\'t know how. Any suggestions? thanks! My dropdown is just a select like:

Answer 1

I was making a drop-down menu for a language selector - but I needed the dropdown menu to display the current language upon page load. I would either be getting my initial language from a URL param example.com?user_language=fr, or detecting it from the user’s browser settings. Then when the user interacted with the dropdown, the selected language would be updated and the language selector dropdown would display the currently selected language.

In the spirit of the other answers using food examples, I got all sorts of fruit goodness for you.

• First up, answering the initially asked question with a basic React functional component - two examples with and without props, then how to import the component elsewhere.

• Next up, the same example - but juiced up with Typescript.

• Then a bonus finale - A language selector dropdown component using Typescript.

---

Basic React (16.13.1) Functional Component Example. Two examples of FruitSelectDropdown , one without props & one with accepting props fruitDetector

import React, { useState } from 'react'

export const FruitSelectDropdown = () => {
  const [currentFruit, setCurrentFruit] = useState('oranges')
  
  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }
  
  return (
    

       changeFruit(event.target.value)}
        value={currentFruit}
      >
        Red Apples
        Outrageous Oranges
        Technically a Fruit Tomatoes
        Bodacious Bananas
      
    
  )
}

Or you can have FruitSelectDropdown accept props, maybe you have a function that outputs a string, you can pass it through using the fruitDetector prop

import React, { useState } from 'react'

export const FruitSelectDropdown = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)
  
  const changeFruit = (newFruit) => {
    setCurrentFruit(newFruit)
  }
  
  return (
    

       changeFruit(event.target.value)}
        value={currentFruit}
      >
        Red Apples
        Outrageous Oranges
        Technically a Fruit Tomatoes
        Bodacious Bananas
      
    
  )
}

Then import the FruitSelectDropdown elsewhere in your app

import React from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App = () => {
  return (
    

      
A webpage about fruit
      

        
Pick your favorite fruit
        

      
    
  )
}

export default App

---

FruitSelectDropdown with Typescript

import React, { FC, useState } from 'react'

type FruitProps = {
  fruitDetector: string;
}

export const FruitSelectDropdown: FC = ({ fruitDetector }) => {
  const [currentFruit, setCurrentFruit] = useState(fruitDetector)
  
  const changeFruit = (newFruit: string): void => {
    setCurrentFruit(newFruit)
  }
  
  return (
    

       changeFruit(event.target.value)}
        value={currentFruit}
      >
        Red Apples
        Outrageous Oranges
        Technically a Fruit Tomatoes
        Bodacious Bananas
      
    
  )
}

Then import the FruitSelectDropdown elsewhere in your app

import React, { FC } from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'

const App: FC = () => {
  return (
    

      
A webpage about fruit
      

        
Pick your favorite fruit
        

      
    
  )
}

export default App

---

Bonus Round: Translation Dropdown with selected current value:

import React, { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'

export const LanguageSelectDropdown: FC = () => {
  const { i18n } = useTranslation()
  const i18nLanguage = i18n.language
  const [currentI18nLanguage, setCurrentI18nLanguage] = useState(i18nLanguage)
  
  const changeLanguage = (language: string): void => {
    i18n.changeLanguage(language)
    setCurrentI18nLanguage(language)
  }
  
  return (
    

       changeLanguage(event.target.value)}
        value={currentI18nLanguage}
      >
        English
        Deutsch
        Español
        Français
      
    
  )
}

---

An invaluable resource for React/Typescript