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 5 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?
free commented 5 years ago Delete
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 5 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
- ForumUser: 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