Control the selected option

Hi,

selected property is setting default select text content. It doesn't add an option to your options list. And it's displayed above all the options and can't be clicked.

I recommend using only your options from the state. You can set checked property in the state if you need.

If you want to add an option to options list from f.e. Input you can try the next code:

import React from "react";
import { MDBSelect, MDBInput, MDBBtn } from "mdbreact";

class App extends React.Component {
  state = {
    options: [
      {
        checked: false,
        value: "1"
      },
      {
        checked: false,
        value: "2"
      },
      {
        checked: false,
        value: "3"
      }
    ],
    inputValue: ""
  };

  addOption = () => {
    this.setState({
      options: [...this.state.options, { checked: true, value: this.state.inputValue }]
    })
  }

  onChange = e => {
    this.setState({
      inputValue: e.target.value
    })
  }

  render() {
    return (
      <div style={{ width: "500px", margin: "50px" }}>
      <MDBSelect
        options={this.state.options}
        label="Choose your option"
      />
      <MDBInput onChange={e => this.onChange(e)} value={this.state.inputValue}/>
      <MDBBtn onClick={this.addOption}>Add an option</MDBBtn>
    </div>
    );
  }
}

export default App;

After clicking on the button it will add the option to the options list in state, where value is value provided to input and checked will set to true(also can be set to false) (but don't forget to set all the others options checked value to false if you are not using 'multiple' select).

Hope I could help.

Best regards.