MDBSelect is not working (PRO / Material Version)


Topic: MDBSelect is not working (PRO / Material Version)

dev.penpenn free asked 3 years ago

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>
    )  }  }

Aliaksandr Andrasiuk staff answered 3 years ago

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 free commented 3 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 free commented 3 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 3 years ago

No problem, happy codding! :)


dev.penpenn free answered 3 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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