MDBSelect not displaying options


Topic: MDBSelect not displaying options

dbhowmik pro premium priority asked 3 years ago

Hi,

I am using MDBSelect to load a dropdown with values from an array, but it does not display the options. I do not see any error in the console even. Every option (LI) that is generated for some reason includes data-test="controlled-select-option". Not sure if this is the cause of the issue.

    state = {
    options: [
        {
            text: "Internet",
            value: "1"
        },
        {
            text: "Friend",
            value: "2"
        },
        {
            text: "Employee",
            value: "3"
        }
    ]
}

<MDBSelect options={this.state.autoyear} selected="Year" label="Year" size="sm" />

<ul data-test="controlled-select-options" class="dropdown-content select-dropdown fadeElement"><li data-test="controlled-select-option" data-multiple="false" class="disabled"><span data-multiple="false" class="filtrable">How did you hear about us</span></li><li data-test="controlled-select-option" data-multiple="false" class=""><span data-multiple="false" class="filtrable">Internet</span></li><li data-test="controlled-select-option" data-multiple="false" class=""><span data-multiple="false" class="filtrable">Friend</span></li><li data-test="controlled-select-option" data-multiple="false" class=""><span data-multiple="false" class="filtrable">Employee</span></li></ul>

Thanks,


Krzysztof Wilk staff answered 3 years ago

Hi!

Your way of using the MDBSelect component is wrong. The array of options should be passed to the data property. If you want to select the value by default - you have to add the selected: true property inside the array of options. So the proper MDBSelect component initialization should look like this:

<MDBSelect data={this.state.options} />

Note that you called your state options and you are trying to pass the state called autoyear which doesn't exist.

More about Select you can read here: https://mdbootstrap.com/docs/b5/react/forms/select/ :)

Keep coding!


dbhowmik pro premium priority answered 3 years ago

Hi,

I am using "mdbreact"; and not 'mdb-react-ui-kit' hence do not have access to data property but its called options property.

https://mdbootstrap.com/docs/react/forms/select/

Thanks


dbhowmik pro premium priority answered 3 years ago

also sorry for the wrong array that I submitted it is called

<MDBSelect options={this.state.aboutus} label="About Us" size="sm" />

Krzysztof Wilk staff answered 3 years ago

Hi!

You are still providing a state that doesn't exist. You created a state called options, so there's no such a state called aboutus. If you use your Select as below everything should work. If you still have a problem - please provide a complete code of your app with select :)

<MDBSelect options={this.state.options} label="About Us" size="sm" />

Keep coding!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 2.0.0
  • Device: Laptop
  • Browser: Edge, Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No