Select options name is rendered as span

Topic: Select options "name" is rendered as span

matteo gassend (LanguageMatt) free asked 5 years ago

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

<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?

Add comment

Jakub Mandra staff answered 5 years ago

0 0 Best answer

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 5 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 5 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..

OK, but I don't see any "name" there :)<div>I used that code in plain CRA app and it works<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 = { 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;</pre></div> Which mdbreact version do you use?Yeah, we know that "Specification of the issue" provides to choose only up to 4.7.1 option..

Please insert min. 15 characters.

matteo gassend (LanguageMatt) free commented 5 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 5 years ago

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

Keep hacking!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

matteo gassend (LanguageMatt)

50Support score
6Questions 2Answers 0Snippets