Pre-select option from state object React.js


Topic: Pre-select option from state object React.js

vds-admin asked a year ago

Hi there,

I'am trying to pre-select on option from my form state object but cannot manage to render it. As an example, doing this works if I use a string:

class SelectPage extends Component {
  render() {
    return (
      <div>
        <MDBSelect>
          <MDBSelectInput selected="Choose your option" />
          <MDBSelectOptions>
            <MDBSelectOption disabled>Choose your option</MDBSelectOption>
            <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
            <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
            <MDBSelectOption value="3" selected={_id === "456ef-78e78-feff56"}>Option nr 3</MDBSelectOption>               
          </MDBSelectOptions>
        </MDBSelect>
        <label>Example label</label>
      </div>
    );
  }
}

But this doesn't when I use the state object:

class SelectPage extends Component {
  render() {
    return (
      <div>
        <MDBSelect>
          <MDBSelectInput selected="Choose your option" />
          <MDBSelectOptions>
            <MDBSelectOption disabled>Choose your option</MDBSelectOption>
            <MDBSelectOption value="1">Option nr 1</MDBSelectOption>
            <MDBSelectOption value="2">Option nr 2</MDBSelectOption>
            <MDBSelectOption value="3" selected={_id === this.props.myId}>Option nr 3</MDBSelectOption>
            <MDBSelectOption value="4">Option nr 4</MDBSelectOption>
            <MDBSelectOption value="5">Option nr 5</MDBSelectOption>
          </MDBSelectOptions>
        </MDBSelect>
        <label>Example label</label>
      </div>
    );
  }
}

Here this.props.myId come from my form state object and passed to the component via props. On Chrome's react.js developer tools the this.props.myId is populated correctly.

The only thing I really want to do is this below but I cannot manage to do it with the MDB react select component:

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

Thanks in advance for your help.


Anna Morawska staff answered a year ago

Hi there,

It's hard to tell what's wrong - it's a simple logic condition - it's not because of MDBSelect - try to console.log both values - maybe types don't match. Also - you use a _id variable - have you declared it somewhere before?


vds-admin commented a year ago

Thanks for your reply. I did console log the variables and both are presents. I still didn't figure out what happened BUT by feeding the select data with an array rather than props like you do in your example I managed to make it works. Thanks again.


Anna Morawska staff commented a year ago

no problem, it's good that you've sorted this out :)


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.8.4
  • Device: PC
  • Browser: Chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes
About author