TypeError: event.target on React Select input control

Question

Trying to change state on Change using a React Select node module package, if its a regular text input it works but can't quite get this to work, returns "TypeError: event.target is undefined".

Only putting in the code that matters, not full page.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "15",
      options: [
        { label: "Sup", value: "18" },
        { label: "Sup", value: "18" },
        { label: "Sup", value: "18" },
        { label: "Sup", value: "18" }
      ]
    };

    this.stateChange = this.stateChange.bind(this);
  }

  stateChange = event => {
    console.log(event.target.value);
    // this.setState({ value: event.target.value });
  };

  render() {
    const Home = () => {
      return (
        <Provider store={store}>
              <div className="categories">

                <Select
                  options={this.state.options}
                  onChange={this.stateChange}
                />

              </div>

Answer 1

If you're using the react-select library, it looks like the Select component's onChange prop will actually just give you the selected item rather than an event:

stateChange = selectedOption => {
  console.log(selectedOption);
  this.setState({ value: selectedOption });
};

Answer 2

Try this:

stateChange = selectedOption => {
    console.log(`Option selected:`, selectedOption);
    this.setState({ value: selectedOption });
    // with React-Select, selectedOption is a value of option, not an event
};

Answer 3

React select onChange gives you the value directly, instead of the event , so you can simply use,

stateChange = value => {
  console.log(value);
  this.setState({ value: value });
};

React select docs