Select options name is rendered as span

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

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!