Topic: MDBSelect is not working (PRO / Material Version)
Hello, MDBSelect is not working as expected. i already import all the css and bootstrap link and follow the instruction into the quick start guide. I also tried to use the PRO component option from the docs like https://mdbootstrap.com/docs/react/sections/e-commerce/ but all of them is working fine. except this MDBSelect. can someone pls help me with my issue? Thanks a lot!
import React, { Component } from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBSelect } from 'mdbreact';
class UserProfilePage extends Component {
state = {
options: [
{
text: "Male",
value: "1"
},
{
text: "Female",
value: "2"
}
]
};
render(){
return(
<MDBContainer className={[classes.backgroundInfo, "p-4"].join(" ")}>
<MDBRow className={["p-2", classes.titlePage].join(" ")}>
<MDBCol className={["text-uppercase"].join(" ")}>My Profile</MDBCol>
</MDBRow>
<MDBRow className={["text-uppercase p-2"].join(" ")}>
<MDBCol>
<small>Full Name</small>
<div>{this.props.fullName}</div>
</MDBCol>
<MDBCol>
<small>Birthday</small>
<div>MM-DD-YYYY</div>
</MDBCol>
</MDBRow>
<MDBRow className={["text-uppercase p-2"].join(" ")}>
<MDBCol>
<small>Mobile Number</small>
<div>xxx-xxx-xxxx</div>
</MDBCol>
<MDBCol>
<small>Gender</small>
<div>
<MDBSelect
options={this.state.options}
selected="Choose your option"
label="Gender" />
</div>
</MDBCol>
</MDBRow>
<MDBRow className={["text-uppercase p-2"].join(" ")}>
<MDBCol>
<MDBBtn className={classes.editInfo}>Edit</MDBBtn>
</MDBCol>
</MDBRow>
</MDBContainer>
) } }
When i inspect element my code in the browser this is what i saw
div options="[object Object],[object Object],[object Object]" class="select-wrapper mdb-select md-form"
seems like the code in the state didnt read as expected
Hi,
I've copied your code and it works well.
Which version of MDBReact do you use?
Can you try to use other PRO components? Do they work?
Can you inspect <div options="[object Object],[object Object]" ...> more closely? Does it have <ul class="dropdown-content..."...> with all the options?
Best regards.
dev.penpenn commented 5 years ago
Hello @Aliaksandr Andrasiuk thanks for your reply. i inspect element my code in the browser and i see this
<div options="[object Object],[object Object]" class="select-wrapper mdb-select md-form">
<span class="caret"></span><input type="text" readonly="" class="select-dropdown" value="" style="caret-color: transparent;">
<ul class="dropdown-content select-dropdown fadeElement fadeIn" style="top: 0.6rem;">
<li data-multiple="false" class="disabled"><span data-multiple="false" class="filtrable">Choose your option</span></li>
<li data-multiple="false" class=""><span data-multiple="false" class="filtrable">Male</span></li>
<li data-multiple="false" class=""><span data-multiple="false" class="filtrable">Female</span></li>
</ul>
<label class="mdb-main-label active text-primary" style="">Example label</label>
</div>
i see that it loops my state array. but why is the select options didnt show up? is there any requirements that i skipped to add specially the jquery component? in order for the select option to work? I tried other pro components they also didnt work as expected.
dev.penpenn commented 5 years ago
Aha! I saw the problem now. i imported the styles after import app.js. it should be before importing app.js. dumb me! >_< my bad. thanks for your help btw @Aliaksandr Andrasiuk
Aliaksandr Andrasiuk staff commented 5 years ago
No problem, happy codding! :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.19.0
- Device: macbook
- Browser: chrome
- OS: macbook
- Provided sample code: No
- Provided link: Yes