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

You want the options of the first Select to be changed when the second Select changes? — Titulum
– Titulum, Commented May 5, 2020 at 13:57
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 — jamgam
– jamgam, Commented May 5, 2020 at 13:59
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). — ruby_newbie
– ruby_newbie, Commented May 5, 2020 at 14:01

Titulum · Accepted Answer · 2020-05-05 14:06:17Z

4

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

answered May 5, 2020 at 14:06

Titulum

11.6k13 gold badges54 silver badges91 bronze badges

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

1 Comment

jamgam Over a year ago

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

imgnx · Accepted Answer · 2020-05-05 14:11:03Z

1

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.

answered May 5, 2020 at 14:11

imgnx

7962 gold badges13 silver badges31 bronze badges

Collectives™ on Stack Overflow

React-Select trigger onChange when value changes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related