Hi,

I don't really understand why but I did as you said and it works: store options in state and set checked true in the render

Thanks

Hi,

Is it necessary to not store your options in the state? It should resolve this problem.

You can try this code :

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

class BarRight extends Component {
  state = {
    currentRoom: 7441,
  };

  setRoom = t => {
    if (t[0] !== this.state.currentRoom) this.setState({ currentRoom: t[0] });
  };

  render() {
    const { currentRoom } = this.state;

    let options = [
      { checked: currentRoom === "7441", text: "bedroom", value: "7441" },
      { checked: currentRoom === "7449", text: "bathroom", value: "7449" },
      { checked: currentRoom === "7474", text: "wc", value: "7474" }
    ];

    return (
      <div className={"bar-right-wrapper"} style={{ width: "250px" }}>
        <div className={"col-12"}>
          <MDBSelect
            getValue={this.setRoom}
            id={"room"}
            selected={""}
            options={options}
          />
        </div>
      </div>
    );
  }
}

export default BarRight;

It works but it doesn't show the selected value after first initialization.

Hi,

I simplified my code because it is more complex but by doing like this, I still have my problem

import React, {Component} from 'react'
import {MDBSelect} from 'mdbreact'



class BarRight extends Component {

    state = {
        currentRoom: 7441
    }


    setRoom = (t) => {
        if(t[0] != this.state.currentRoom) this.setState({currentRoom: t[0]});
    }

    render() {

        const {currentRoom} = this.state;

        let options = [
            { checked: false, text: "bedroom", value: "7441" },
            { checked: false, text: "bathroom", value: "7449" },
            { checked: false, text: "wc", value: "7474" }
        ];


        for(const i in options){
            if(options[i].value == currentRoom) options[i].checked = true;
        }

        console.log(options);

        return (
        <div className={'bar-right-wrapper'} style={{'width': '250px'}}>
            <div className={'col-12'}>
                <MDBSelect
                    getValue={this.setRoom}
                    id={'room'}
                    selected={""}
                    options={options}
                ></MDBSelect>
            </div>
        </div>
        )
    }
}

export default BarRight

Hi,

Can you show me the full code? Because I can't understand what's the problem.

In what way do you change your options?

The better way will be to store your options in the state.

For example:

import React, { Component } from "react";
import { MDBContainer, MDBSelect } from "mdbreact";

class App extends Component {
  state = {
    options: [
      { checked: true, text: "bedroom", value: "7441" },
      { checked: false, text: "bathroom", value: "7449" },
      { checked: false, text: "wc", value: "7474" }
    ]
  };

  render() {
    return (
      <MDBContainer>
        <MDBSelect
          selected=""
          getValue={this.handleChange}
          id={"room"}
          options={this.state.options}
        />
      </MDBContainer>
    );
  }
}

export default App;