React-Select trigger onChange when value changes

Question

I'm using React-Select and have two dropdowns on my page. When the first dropdown is selected it changes the value of the 2nd dropdown successfully but I'm trying to get the onChange on the 2nd dropdown to change when that happens also. Is there a way to do that? I made a codesandbox of a simple example of what I'm trying to accomplish

import React, {useState} from "react";
import Select from 'react-select';
import "./styles.css";

export default function App() {
  const [genre, setGenre] = useState()

  const artistslist = [
    {value: 'ACDC', label: 'AC/DC'},
    {value: 'LZ', label: 'Led Zeppelin'},
    {value: 'Garth', label: 'Garth Brooks'},
    {value: 'Alan', label: 'Alan Jackson'}
  ]

  const genrelist = [
    {value: 'rock', label: 'Rock'},
    {value: 'country', label: 'Country'}
  ]

  const handleArtistChange = (event) => {
    console.log(event)
    if (event.value === 'LZ' || event.value === "ACDC") {
      setGenre({value: 'rock', label: 'Rock'})
    } else {
      setGenre({value: 'country', label: 'Country'})
    }
    console.log(genre)
  }

  const handleGenreChange = (event) => {
    console.log("Genre Changed")
  }


  return (
    <div className="App">
      <Select options={artistslist} onChange={handleArtistChange} />
      <Select options={genrelist} value={genre} onChange={handleGenreChange} />
    </div>
  );
}

CodeSandbox Example

Solution 1

This behaviour is not supported by React-Select. However, you can manually call the function whenever anything changes:

const handleArtistChange = (event) => {
  console.log(event)
  if (event.value === 'LZ' || event.value === "ACDC") {
    setGenre({ value: 'rock', label: 'Rock' })
  } else {
    setGenre({ value: 'country', label: 'Country' })
  }
  console.log(genre)
}

const handleGenreChange = (event) => {
  console.log("Genre Changed")
}

const handleChange = (selector, event) => {
  if (selector === "artist") {
    handleArtistChange(event);
  } else if (selector === "genre") {
    handleGenreChange(event);
  } else {
    // Other logic
  }
  // Here you trigger whatever you want
}

return (
  <div className="App">
    <Select options={artistslist} onChange={event => handleChange("artist", event)} />
    <Select options={genrelist} value={genre} onChange={event => handleChange("genre", event)} />
  </div>
)

Solution 2

You should just call handleGenreChange with the value that react-select passes from the first event. Instead of firing another event, you just create an event chain from the first event.

Comments

[Titulum]

You want the options of the first Select to be changed when the second Select changes?

[jamgam]

when the top select changes, the bottom will change value but the onChange handler doesn't fire unless you actually click and select something with the bottom dropdown. I thought it would trigger when the value changes

[ruby_newbie]

The on change only fires if someone changes the selected option. This seems like something you would want to control with state management(however you are doing that).

[jamgam]

Thanks. Using this setup worked like a charm. Appreciate it