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;

Does this answer your question? How to get selected value of a dropdown menu in ReactJS — greenjaed
– greenjaed, Commented Jun 15, 2021 at 18:46

Sarun UK · Accepted Answer · 2021-06-16 05:45:56Z

0

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

edited Jun 16, 2021 at 5:45

answered Jun 15, 2021 at 16:29

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

XinxLax Over a year ago

How do I retrieve the value from the second drop down menu ? I understand the value from the first drop down menu can be easily retrieve from event.target.value but I'm not sure how to retrieve the value from the second drop down menu

Sarun UK Over a year ago

I have updated the codesandbox. check it out

XinxLax Over a year ago

Thanks, your code work perfectly for my issue. Appreciate it.

Alexandr Vyshnyvetskyi · Accepted Answer · 2021-06-15 17:11:53Z

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>
  );
}

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related