Topic: Pre-select option from state object React.js
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 7 years 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 7 years 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 7 years ago
no problem, it's good that you've sorted this out :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
 - Premium support: No
 - Technology: MDB React
 - MDB Version: 4.8.4
 - Device: PC
 - Browser: Chrome
 - OS: windows 10
 - Provided sample code: No
 - Provided link: Yes