react-select onChange not working after change options

Question

I have a component using react-select, I get the options from props, on selct option I want to rerender the select with other options - it works, but onChange not triggered.

import Select from 'react-select';

onChange(option){ 
   dispatch(updateOptions());
}

render(){
  return 
    <Select
      options={this.props.options}
      onChange={this.onChange}
      value={this.state.text}
      menuIsOpen
    />
} 

Solution 1

Please have a look at this example, I have created two components one as a Functional Component and the other as Class Component.

Hope this helps.

Solution 2

I was made example and it's working? Let's try it on your code

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


export default class FixedOptions extends Component {
  state = {
    value: {},
  };

  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }

  onChange(value) {
    console.log(value)
    this.setState({ value: value });
  }

  render() {
    return (
      <Select
        value={this.state.value}
        onChange={this.onChange}
        options={[{a: 1, b: 2}, {a: 2, b: 3}]}
      />
    );
  }
}