Open In App

How to change a select’s options based on another dropdown using React?

Improve
Improve
Like Article
Like
Save
Share
Report

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front end library responsible only for the view layer of the application. It is maintained by Facebook.

Select in HTML allows us to choose among multiple values using the dropdown. Here, we are talking about changing select options based on another dropdown. In React, it is very easy to achieve with the help of the state. For those who don’t about state here is a brief of it.

The STATE of a component is an object that holds some information that may change over the lifetime of the component.

If you want to know more about the state, please refer to state in react geeksforgeeks and state and lifecycle reactjs.org.

React has both Class-Based components and Functional Component so for this article, we will use Functional Component. In the Functional component, the state can be managed using useState hook.

We want to change the selects options based on other dropdowns so we will follow the below steps.

  1. Create a state variable that is initially null or undefined.
  2. Create different arrays for different dropdowns.
  3. Create a local variable say type that will hold any of the array based on the dropdown selected.
  4. Create a function that will be called whenever an option from the dropdown is selected, this function will change the state variable so that the value of type can be determined dynamically.
  5. Lastly, use type variables to create a different set of options that the user will see.

Now we will create a Component using all the steps described above.

App.js: Below is the code for App.js component.

Javascript




import * as React from "react";
  
const App = () => {
  /** "selected" here is state variable which will hold the
   * value of currently selected dropdown.
   */
  const [selected, setSelected] = React.useState("");
  
  /** 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
      style={{
        padding: "16px",
        margin: "16px",
      }}
    >
      <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>
            {
              /** This is where we have used our options variable */
              options
            }
          </select>
        </div>
      </form>
    </div>
  );
};
  
export default App;


Output:

Note: You can also use the Class-Based component, logic would be the same.



Last Updated : 18 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads