Select Not Showing Up

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?

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

farzadalizadeh free answered 3 years ago

0 0 Best answer

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

Add comment

dev.penpenn free answered 5 years ago

0 0 Best answer

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.

Add comment

matteo gassend (LanguageMatt) free answered 5 years ago

0 0 Best answer

Imports are in index.js and are as follows<div><div>import 'font-awesome/css/font-awesome.min.css';</div><div>import 'bootstrap-css-only/css/bootstrap.min.css';</div><div>import 'mdbreact/dist/css/mdb.css';</div></div><div>this is what my array of diameters looks like</div><div><ol class="children expanded" role="group"><li class="parent selected expanded" tabindex="0" role="treeitem" aria-expanded="true">0:<ol class="children expanded" role="group"><li role="treeitem">createdAt: "2018-12-31T11:36:51.000Z"</li><li role="treeitem">headId: null</li><li role="treeitem">id: 1</li><li role="treeitem">updatedAt: "2018-12-31T11:36:51.000Z"</li><li role="treeitem">value: 20</li><li class="parent" role="treeitem" aria-expanded="false">__proto__: Object</li></ol></li><li class="parent expanded" role="treeitem" aria-expanded="true">1:<ol class="children expanded" role="group"><li role="treeitem">createdAt: "2018-12-31T11:36:56.000Z"</li><li role="treeitem">headId: null</li><li role="treeitem">id: 2</li><li role="treeitem">updatedAt: "2018-12-31T11:36:56.000Z"</li><li role="treeitem">value: 40</li></ol></li></ol></div>

Please insert min. 20 characters.

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

0:
1. createdAt: "2018-12-31T11:36:51.000Z"
2. headId: null
3. id: 1
4. updatedAt: "2018-12-31T11:36:51.000Z"
5. value: 20
6. __proto__: Object
1:
1. createdAt: "2018-12-31T11:36:56.000Z"
2. headId: null
3. id: 2
4. updatedAt: "2018-12-31T11:36:56.000Z"
5. value: 40

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

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:<pre class="code-toolbar grey lighten-2 p-3 mb-3">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;</pre>

Please insert min. 20 characters.

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

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

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

matteo gassend (LanguageMatt)

50Support score
6Questions 2Answers 0Snippets