Select options name is rendered as span


Topic: Select options "name" is rendered as span

Hello, I am trying to create a Select input for a form. The code is as follows;

                        <MDBSelect getValue={this.setSelectedList}>
                        <MDBSelectInput selected="Choose a list" />
                        <MDBSelectOptions>
                            <MDBSelectOption disabled>Select a list</MDBSelectOption>
                            {listObjects}
                        </MDBSelectOptions>
                        </MDBSelect>
the listObjects variable is an array generated by this function
    getListOptions = () => {

        let result = this.state.listItems.map((item) => (

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

        ))

        return result

    }
 
The id works fine, so I can retrieve the correct value, but the name is always rendered as span. Can you help me?
 

Jakub Mandra staff premium answered 6 years ago

To retrieve value from select use getValue method - this will return selected value, or you can use getTextContent method - which returns the plain text from that span.

Select is not form element (it is impossible to style html select to fit our material idea), so it can't be just send via native form's methods.

Read more in API section of the documentation.

 

Best,

Jakub

 


matteo gassend (LanguageMatt) commented 6 years ago

Sorry, I don't think I explained correctly what I meant. The problem is with the options. as you can see in the getListOptions method, each option has a "name"(what is displayed), and the call to that function is correct. However, when I go to select one of the options, each one is displayed with a name "span"


Jakub Mandra staff premium commented 6 years ago

OK, but I don't see any "name" there :)

I used that code in plain CRA app and it works

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

class SelectPage extends Component {

state = {
listItems: [{
id: 1,
title: 'title1'
},
{
id: 2,
title: 'title2'
}]
}

getListOptions = () => {
let result =this.state.listItems.map((item) => (
<MDBSelectOptionkey={item.id}value={item.id}>{item.title}</MDBSelectOption>
))
return result
}

render() {
const listObjects =this.getListOptions();

return (
<div>
<MDBSelect>
<MDBSelectInputselected="Choose your option"/>
<MDBSelectOptions>
<MDBSelectOptiondisabled>Choose your option</MDBSelectOption>
{listObjects}
</MDBSelectOptions>
</MDBSelect>
<label>Material Select</label>
</div>
);
}
}

export default SelectPage;

 

Which mdbreact version do you use?

Yeah, we know that "Specification of the issue" provides to choose only up to 4.7.1 option..


matteo gassend (LanguageMatt) commented 6 years ago

Fixed it, thanks! I just precalculated the list in the mounting phase. For some reason, the list got weird if done otherwise. Thanks for the support!


Jakub Mandra staff premium commented 6 years ago

Oh great, I'm glad  I could help :)

Keep hacking! 


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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