onChange is not triggering in react js

Question

I use the dropdown in react js app but onChange is not triggering

my code is

import React from "react";
import PropTypes from "prop-types";
import Dropdown from 'react-dropdown';
const options = [
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two', className: 'myOptionClassName' },

 ];

 class WebDashboardPage extends React.Component {

  constructor(props) {
  super(props);
  this.state = {}
  }

 quan = (event)=> {
console.log("Option selected:");
 this.setState({ value: event.target.value });
};

render() {

return(
  <b><Dropdown className="dropdownCss" options={options} onChange={e => 
  this.quan(e.target.value)} /></b>
 );

}

when I click the items in dropdown it shows the error

"TypeError: Cannot read property 'quan' of undefined"

I'm a newbie to react thanks in advance

Answer 1

There is no issue with the react-dropdown library. Here is the code sandbox that I've set up and corrected OP's code. It works.

import React from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
const options = [
  { value: "one", label: "One" },
  { value: "two", label: "Two", className: "myOptionClassName" }
];
const defaultOption = options[0];
class WebDashboardPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: ""
    };
  }

  quan = value => {
    this.setState({ selectedValue: value });
  };

  render() {
    return (
      <Dropdown options={options} value={defaultOption} onChange={this.quan} />
    );
  }
}

export default WebDashboardPage;