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

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

• javascript
• reactjs
• drop-down-menu
• react-redux
• react-ponent

• This should be onChange={e => this.quan(e)} or onChange={this.quan} – Hemadri Dasari Commented Sep 15, 2018 at 9:42
• It's not working same error is showing – Mohammed Abdul kadhir Commented Sep 15, 2018 at 9:49
• 1 There is something else do you have quan defined twice anywhere in your ponent? Because quan is a function in your code but the error says property so you must have quan defined some where else in your ponent – Hemadri Dasari Commented Sep 15, 2018 at 9:57
• @Think-Twice I checked thoroughly there no other quan in my code – Mohammed Abdul kadhir Commented Sep 15, 2018 at 10:04
• 1 Ok do one thing host your code online and share the link or else share all your code here that’s only way to help you – Hemadri Dasari Commented Sep 15, 2018 at 10:24

6 Answers 6

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;  

You should just do it this way:

<Dropdown className="dropdownCss" options={options} onChange={this.quan} />

Try this:

 class WebDashboardPage extends React.Component {

      constructor(props) {
      super(props);
      this.state = { value: '' }
      this.quan = this.quan.bind(this);
      }

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

    render() {

    return(
      <div><Dropdown className="dropdownCss" options={options} onChange={this.quan} /></div>
     );

    }

It seems the issue is with the react-dropdown ponent itself. You'll need to file an issue there.

react-dropdown ponent might not be using this.props.onChange somewhere or might be using problematically.

Or, it's probably, the ponent requires value state which have not defined?

this.state = {
  value: ''
}

And was causing the issue?

The dropdown dependency you are using does not fire onChange with event as argument instead it fires onChange with the selected option.Try changing

onChange={e => 
  this.quan(e.target.value)}

to

onChange={this.quan}

and change quan to

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

I have tried it on my machine and it wroks perfectly. Also next important thing is don't put options the way you are doing instead put it on state. my final code is

class WebDashboardPage extends Component {

constructor(props) {
super(props);

const options = [
  {
    value: 'one',
    label: 'One'
  }, {
    value: 'two',
    label: 'Two',
    className: 'myOptionClassName'
  }
];

this.state = {options}
}

quan = (selectedOption) => {
console.log("Option selected:" + selectedOption.value);
this.setState({value: selectedOption.value});
};
render() {
return (<b><Dropdown className="dropdownCss" options={this.state.options} onChange={this.quan}/></b>);
}
}

I only did a little refactoring to the code. The main change is in how Dropdown handles change. When you pass in a function to handleChange, Dropdown calls the function internally and passes the selected object to it, so you all you needed to do was create a handler method that has one parameter which you'll use to update the state. I also set an initial state for value. Here's is a demo https://codesandbox.io/s/4qz7n0okyw

import React,  { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import Dropdown from "react-dropdown";

const options = [
  { value: "one", label: "One" },
  { value: "two", label: "Two", className: "myOptionClassName" }
];

class WebDashboardPage extends Component {
  state = {
    value: {}
  };

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

  render() {
    return (
      <Fragment>
        <Dropdown
          className="dropdownCss"
          options={options}
          onChange={this.quan}
        />
      </Fragment>
    );
  }
}

export default WebDashboardPage;

Change to onChange={this.quan}, also in the initial state you should state your this.state.value

this.state = {
 value: ''
}

also try to learn it on html element, not on jsx