Select checked value show

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;

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,

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