Topic: Select Not Showing Up
matteo gassend (LanguageMatt) free asked 5 years ago
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 answered 5 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) free commented 5 years ago
Thank you, that solved it!
Anna Morawska staff commented 5 years ago
Great, if you have any further question, ask here :)
farzadalizadeh free answered 3 years ago
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
dev.penpenn free 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.
matteo gassend (LanguageMatt) free answered 5 years ago
Imports are in index.js and are as follows
Jakub Mandra staff answered 5 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) free commented 5 years ago
I added an answer below with the imports and the array I use
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: 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