根据浏览器语言 ReactJS 设置下拉值？

Question

So i have a small setup in which i have a dropdown and the Dropdown has two values. I am trying to set the default value of the dropdown based on the browser language detected. So if the Browser language is English, the dropdown and it's value should default to English and if the Language is Spanish then it should default to Spanish and so on. Essentially it should be dynamic and it might grow more into the Future. Any help will be Appreciated.

Check out this CodeSandbox for a working example.

This is the complete Code

import React, { Component } from "react";

class Newbie extends Component {
  state = {
    languageSelection: [
      { option: "English", value: "en-us" },
      { option: "Spanish", value: "es" }
    ]
  };
  componentDidMount() {
    let detectedLanguage = navigator.language || navigator.userLanguage;
    alert("The Language is " + detectedLanguage)
  }

  render() {
    return (
      <div>
        <label>
          Language
          <select>
            <option value="en-us">English</option>
            <option value="es">Spanish</option>
          </select>
        </label>
      </div>
    );
  }
}

export default Newbie;

Thank you for all the assistance guys.: Much appreciated. :)

Answer 1

import React, { Component } from "react";

class Newbie extends Component {
  state = { selected: navigator.language || navigator.userLanguage };

  handleChange = (e) => {
    this.setState({ selected: e.target.value })
  }


  render() {
    return (
      <div>
        <label>
          Language
          <select value={this.state.selected} onChange={this.handleChange}>
            <option value="en-US">English</option>
            <option value="es">Spanish</option>
          </select>
        </label>
      </div>
    );
  }
}

export default Newbie;