Topic: Select options "name" is rendered as span
matteo gassend (LanguageMatt) free asked 6 years ago
Hello, I am trying to create a Select input for a form. The code is as follows;
getListOptions = () => {
let result = this.state.listItems.map((item) => (
<MDBSelectOption key={item.id} value={item.id}>{item.title}</MDBSelectOption>
))
return result
}
Jakub Mandra staff 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) free 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 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) free 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 commented 6 years ago
Oh great, I'm glad I could help :)
Keep hacking!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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