How do I retrieve the selected value from a dropdown menu in ReactJS

Question

I'm trying to get the value from the selected item of two drop down menu (DDM). The first DDM will populate the second DDM base on user input. E.g. first DDM select "langauge", second DDM will only show "c++, java, python, c#". I'm having difficulty in retrieving the value from both drop down menu as string ? Any suggestions ? Many thanks.

Current Code

  /** Function that will set different values to state variable
   * based on which dropdown is selected
   */
  const changeSelectOptionHandler = (event) => {
    setSelected(event.target.value);
  };
  
  /** Different arrays for different dropdowns */
  const algorithm = [
    "Searching Algorithm",
    "Sorting Algorithm",
    "Graph Algorithm",
  ];
  const language = ["C++", "Java", "Python", "C#"];
  const dataStructure = ["Arrays", "LinkedList", "Stack", "Queue"];
  
  /** Type variable to store different array for different dropdown */
  let type = null;
  
  /** This will be used to create set of options that user will see */
  let options = null;
  
  /** Setting Type variable according to dropdown */
  if (selected === "Algorithm") {
    type = algorithm;
  } else if (selected === "Language") {
    type = language;
  } else if (selected === "Data Structure") {
    type = dataStructure;
  }
  
  /** If "Type" is null or undefined then options will be null,
   * otherwise it will create a options iterable based on our array
   */
  if (type) {
    options = type.map((el) => <option key={el}>{el}</option>);
  }
  return (
    <div>
      <form>
        <div>
          {/** Bind changeSelectOptionHandler to onChange method of select.
           * This method will trigger every time different
           * option is selected.
           */}
          <select onChange={changeSelectOptionHandler}>
            <option>Choose...</option>
            <option>Algorithm</option>
            <option>Language</option>
            <option>Data Structure</option>
          </select>
        </div>
        <div>
          <select>
            {
              options
            }
          </select>
        </div>
      </form>
    </div>
  );
};
  
export default App;

Answer 1

Try this approach,

    import { useEffect, useState } from "react";

export default function App() {
  const [selected, setSelected] = useState("");
  const [type, setType] = useState([]);
  const [selected2, setSelected2] = useState("");

  const algorithm = [
    "Searching Algorithm",
    "Sorting Algorithm",
    "Graph Algorithm"
  ];
  const language = ["C++", "Java", "Python", "C#"];
  const dataStructure = ["Arrays", "LinkedList", "Stack", "Queue"];

  const changeSelectOptionHandler = (event) => {
    setSelected(event.target.value);
  };

  const changeDp2Handle = (event) => {
    setSelected2(event.target.value);
  };

  useEffect(() => {
    let type = [];
    if (selected === "Algorithm") {
      type = algorithm;
    } else if (selected === "Language") {
      type = language;
    } else if (selected === "Data Structure") {
      type = dataStructure;
    }
    setSelected2("");
    setType(type);
  }, [selected]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <select onChange={changeSelectOptionHandler}>
          <option>Choose...</option>
          <option>Algorithm</option>
          <option>Language</option>
          <option>Data Structure</option>
        </select>
      </div>
      <hr />
      <div>
        <select onChange={changeDp2Handle}>
          <option>Choose...</option>
          {type.map((v) => (
            <option key={v}>{v}</option>
          ))}
        </select>
        {selected2}
      </div>
    </div>
  );
}

codesandbox - https://codesandbox.io/s/jovial-resonance-joqlo?file=/src/App.js:0-1208

Answer 2

I would suggest to do something like so

import { useState } from "react";
import "./styles.css";

const Select = ({ options, fieldName }) => {
  const [value, setValue] = useState();

  return (
    <select
      name={fieldName}
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
    >
      {options.map(({ value, label }, i) => {
        return (
          <option key={i} value={value}>
            {label}
          </option>
        );
      })}
    </select>
  );
};

const dataStructureOptions = [
  {
    label: "Arrays",
    value: "Arrays"
  },
  {
    label: "LinkedList",
    value: "LinkedList"
  },
  {
    label: "Stack",
    value: "Stack"
  },
  {
    label: "Queue",
    value: "Queue"
  }
];

const languageOptions = [
  {
    label: "C++",
    value: "C++"
  },
  {
    label: "Java",
    value: "Java"
  },
  {
    label: "Python",
    value: "Python"
  },
  {
    label: "C#",
    value: "C#"
  }
];

const filterOptions = [
  {
    label: "Choose...",
    value: "Choose..."
  },
  {
    label: "Algorithm",
    value: "Algorithm"
  },
  {
    label: "Language",
    value: "Language"
  },
  {
    label: "Data Structure",
    value: "Data Structure"
  }
];

const mappedSelectedOptions = {
  Language: languageOptions,
  "Data Structure": dataStructureOptions
};

const FILTER_FIELD_NAME = "filter";

export default function App() {
  const [currentSelectedFilter, setCurrentSelectedFilter] = useState();

  const onFormChange = (e) => {
    const fieldName = e.target.name;

    if (fieldName === FILTER_FIELD_NAME) {
      setCurrentSelectedFilter(e.target.value);
    }
  };

  const onSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    console.log("onSubmit", formData);
  };

  const currentMappedOptions = mappedSelectedOptions[currentSelectedFilter];

  return (
    <div>
      <form onChange={onFormChange} onSubmit={onSubmit}>
        <Select options={filterOptions} fieldName={FILTER_FIELD_NAME} />

        {currentMappedOptions && (
          <Select options={currentMappedOptions} fieldName="options" />
        )}

        <button>Submit</button>
      </form>
    </div>
  );
}