Topic: MDBSelect not displaying options
dbhowmik priority asked 2 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 2 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!
dbhowmik priority answered 2 years ago
also sorry for the wrong array that I submitted it is called
<MDBSelect options={this.state.aboutus} label="About Us" size="sm" />
dbhowmik priority answered 2 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
Krzysztof Wilk staff answered 2 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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- 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