Drop down not expanding on click because onChange won't fire

Question

I am using to create a dropdown for my page.为我的页面创建一个下拉列表。

The is as follows:如下：

<Dropdown options={options} onChange={this.handleDropdownChange} placeholder="Select an option" />

is defined as follows:定义如下：

const options = ['Safety', 'Consumable', 'Machinery', 'Hardware']

is defined as follows: 定义如下：

handleDropdownChange(e) {

    console.log('Inside handleDropdownChange')
    this.setState({ selectValue: e.target.value });
  }

However the Dropdown doesn't expand when I click on it. Moreover I get no message in my print statement. Can someone please help me with the code here? I am relatively new to React JS. Thank you!

Demo

This is the file in its entirety:

import React, { Component } from 'react'
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
import api from '../../api'
import styled from 'styled-components'
import './Raise_MRN_Modal.css';


const RaiseMRNForm = styled.div.attrs({

})`

    height : 500px;
    background-color : papayawhip;
`

const options = ['Safety', 'Consumable', 'Machinery', 'Hardware']


class MRNmodal extends Component 
{
    constructor(props) {
        super(props)


        this.state = {

            show : props.show,
            close : props.close,
            children : props.children,
            value: 'Safety',
        }

    }

    prepareComponentState (props) {
    var usedProps = props || this.props

    this.state = {

            show : usedProps.show,
            close : usedProps.close,
            children : usedProps.children,
        }    

    }

    componentWillReceiveProps = async (nextProps) => {

        this.prepareComponentState(nextProps)
    }


    componentWillMount = async (props) => {

        this.prepareComponentState()
    }

    handleDropdownChange = option => {
    console.log('Inside handleDropdownChange ', option);
    this.setState({ value: option.label });
    }


    render() {

        var { clientName, itemName, show, close, children, value } = this.state
        const defaultOption = options[0]


    return (
            <div>
            <div className="modal-wrapper"
                style={{
                    transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',
                    opacity: show ? '1' : '0'
                }}>

                <RaiseMRNForm>
                    <br/>

                    <Dropdown
                    value={this.state.value}
                    options={options}
                    onChange={this.handleDropdownChange}
                    placeholder="Select an option"
                    />
                </RaiseMRNForm>               
            </div>
        </div>
    )
    }
}

export default MRNmodal;

Sandbox for the code: https://codesandbox.io/s/lucid-babbage-r94u3 .

The onChange of the DropDown doesn't fire so value is always undefined.

Answer 1

handleDropdownChange accepts option not an event:

const options = ['Safety', 'Consumable', 'Machinery', 'Hardware'];

class MRNModal extends Component {
  state = {
    value: 'Safety'
  };

  handleDropdownChange = option => {
    console.log('Inside handleDropdownChange ', option);
    this.setState({ value: option.label });
  };

  render() {
    return (
      <div>
        <Dropdown
          value={this.state.value}
          options={options}
          onChange={this.handleDropdownChange}
          placeholder="Select an option"
        />
      </div>
    );
  }
}

Answer 2

I have two suggestions to your problem.

1. Your dropdown is not pressed correctly because something is blocking the dropdown because of a style issue.

2. You haven't correctly passed options array to the dropdown.

In that case, you can put your "options" array in state and access it from there.

this.state = {

        show : usedProps.show,
        close : usedProps.close,
        children : usedProps.children,
        options : ['Safety', 'Consumable', 'Machinery', 'Hardware']
    }    

}

<Dropdown
    value={this.state.value}
    options={this.state.options}
    onChange={this.handleDropdownChange}
    placeholder="Select an option"
/>

Let me know if this helps.