How to use conditional dropdown in react-select

Question

I want to add two dropdowns.

Genre
Books

The Books dropdown would be dependent on value selected in Genre dropdown. I am using react-select library. With my failed efforts I was able to do this. Dependent dropdown does get filtered, but no value is selected in the select bar. This is my code.

import React, { Component } from "react";
import Select from "react-select";

class Condiontaldropdown extends Component {
  constructor() {
    super();
    this.state = {
      selectedOption: {},
      selectedOption2: {},
    };
  }

  handleChange1 = (selectedOption) => {
    this.setState({ selectedOption });
  };

  handleChange2 = (selectedOption) => {
    this.setState({ selectedOption2: selectedOption });
  };

  render() {
    const Genres = [
      { value: "Fiction", label: "Fiction" },
      { value: "Murder", label: "Murder" },
      { value: "Thriller", label: "Thriller" },
    ];

    const Books = [
      { value: "GOT", label: "GOT", link: "Fiction" },
      { value: "LOTR", label: "LOTR", link: "Fiction" },
      { value: "Angel And Demons", label: "Angel And Demons", link: "Murder" },
      { value: "Dragon", label: "Dragon", link: "Thriller" },
      { value: "Tattoo", label: "Tattoo", link: "Thriller" },
    ];

    const filteredOptions = Books.filter(
      (o) => o.link === this.state.selectedOption.value
    );
    return (
      <div>
        <p> Select your favourite Genre</p>
        <Select
          value={this.state.selectedOption.value}
          onChange={this.handleChange1}
          options={Genres}
        ></Select>
        <p>Select your favourite Book from that genre</p>
        <Select
          value={this.state.selectedOption2.value}
          onChange={this.handleChange2}
          options={filteredOptions}
        ></Select>
      </div>
    );
  }
}

export default Condiontaldropdown;

Thunderbolt Engineer · Accepted Answer · 2020-10-16 20:09:11Z

2

You are passing .value to the value props of Select but it is not correct. Please check the following code.

 return (
      <div>
        <p> Select your favourite Genre</p>
        <Select
          value={this.state.selectedOption}
          onChange={this.handleChange1}
          options={Genres}
        ></Select>
        <p>Select your favourite Book from that genre</p>
        <Select
          value={this.state.selectedOption2}
          onChange={this.handleChange2}
          options={filteredOptions}
        ></Select>
      </div>
    );

answered Oct 16, 2020 at 20:09

Thunderbolt Engineer

1,5639 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

How to use conditional dropdown in react-select

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related