Select Not Showing Up


Topic: Select Not Showing Up

Hello, I am trying to use a select component in one of my forms. I've assembled it like this

        </MDBSelect>

                <MDBSelect multiple>

                    <MDBSelectInput selected="Choose diameters"/>

                    <MDBSelectOptions>

                        <MDBSelectOption disabled>Choose lengths</MDBSelectOption>

                        {this.state.diameters.map((item) => (

                            <MDBSelectOption value={item.id}>{item.value}</MDBSelectOption>

                        ))}

                    </MDBSelectOptions>

                </MDBSelect>


But when it renders on the page, the select options don't show up on click. Going into devtools, the options appear like this

<li context="[object Object]" data-multiple="false" class=""><span data-multiple="false" class="filtrable">Option nr 1</span></li>

 

Can you help me?


Jakub Mandra staff premium answered 6 years ago

Hi, 

Are your imports placed before imports of your custom files? It is important to load mdb styles first. 

index.js file from create-react-app should look more or less like this:

import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

matteo gassend (LanguageMatt) commented 6 years ago

Thank you, that solved it!


Anna Morawska staff commented 6 years ago

Great, if you have any further question, ask here :)


Jakub Mandra staff premium answered 6 years ago

Hello,

Can you provide a piece of your diameters array and part of code, where you import styles for mdbreact?

This code, for example, works perfectly fine:

import React, { Component } from "react";
import {
MDBSelect,
MDBSelectInput,
MDBSelectOptions,
MDBSelectOption,
} from "mdbreact";

class SelectPage extends Component {
state = {
diameters: [
{ id: 1, value: "val1" },
{ id: 2, value: "val2" }
]
}

render() {
return (
<div>
<MDBSelect multiple>
<MDBSelectInput selected="Choose diameters" />
<MDBSelectOptions>
<MDBSelectOption disabled>Choose lengths</MDBSelectOption>
{this.state.diameters.map((item) => (
<MDBSelectOption value={item.id}>{item.value}</MDBSelectOption>
))}
</MDBSelectOptions>
</MDBSelect>
</div>
);
}
}

export default SelectPage;

matteo gassend (LanguageMatt) commented 6 years ago

I added an answer below with the imports and the array I use


Imports are in index.js and are as follows

import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
this is what my array of diameters looks like
  1. 0:
    1. createdAt"2018-12-31T11:36:51.000Z"
    2. headIdnull
    3. id1
    4. updatedAt"2018-12-31T11:36:51.000Z"
    5. value20
  2. 1:
    1. createdAt"2018-12-31T11:36:56.000Z"
    2. headIdnull
    3. id2
    4. updatedAt"2018-12-31T11:36:56.000Z"
    5. value40

dev.penpenn answered 5 years ago

Hello im encountering this kind of problem. the select is not working I already imported this styles

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import './assets/css/mdb.css';


Konrad Stępień staff commented 5 years ago

Hi @dev.penpenn,

Could you send me your code? I will try to help you, but I need some more informations.

Best, Konrad.


Sure import ./App after mdb files like this

import '@fortawesome/fontawesome-free/css/all.min.css';import 'bootstrap-css-only/css/bootstrap.min.css';import 'mdbreact/dist/css/mdb.css';import './index.css';

import App from './App';

GOOD LUCK


FREE CONSULTATION

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

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: DeskTop
  • Browser: Chrome
  • OS: MacOs
  • Provided sample code: Yes
  • Provided link: No
Tags