Topic: MDBSelect not working (always select first value)
Expected behavior Component must show the correct value
Actual behavior Always select first option text/value, also if state (ad selected value) has been correctly updated
Resources (screenshots, code snippets etc.)
<MDBSelect
id='test'
name='test'
value={testStateValue}
onValueChange={e => setTestStateValue(e.value)}
label='test'
data={[
{text: 'test01', value: 'test01'},
{text: 'test02', value: 'test02'}
]}
/>
Hi!
To avoid that you can put your data into the useState or useMemo hook and pass it to the component :)
Mazzilli pro premium priority commented 2 years ago
Hi, I'm sorry but I can't understand your answer. In my case data are static and there's no need to put them into a state. Moreover, in your documentation all examples show a static data array. Last not least, in your API documentation the "value" prop is not listed for this Select component.
Can you paste here a full working example, including states and functions to change selected value?
Thanks
Krzysztof Wilk staff commented 2 years ago
Hi!
I think the @clickstudioltds answer and example is correct. The setState method in React causes a rerender, so the MDBSelect component detects a change when you pass some state setter to the onValueChange. It has to know which item it should return when the event occurs and that mechanism is based on the data property. So when using the onValueChange event you have to wrap your data into the useMemo or useState hook to prevent the re-init of your select after getting the value.
how to set MDBSelect value to be sent to hook ?
Below is not working :
]}
name="grup"
value={grup}
onValueChange={(e) => setGrup(e.target.value)}
/>
Krzysztof Wilk staff commented 2 years ago
Hi!
There's no target property in the select onValueChange event. If you want to get current text - you have to use the e.text one. You can check here: https://mdbootstrap.com/docs/b5/react/forms/select/#api-section-methods how this event works and what it returns :)
Keep coding!
If you don't feed your data from a state or better yet a memo it has to be reconstructed on each render which is inefficient, moreover, its state will not be remembered, therefore you will get poor performance and an undesired result if you go bigger down the line.
Read up on useState and useMemo to understand when to use them.
const options = useMemo(() => { return [
{text: 'test01', value: 'test01'},
{text: 'test02', value: 'test02'}
]}, []);
<MDBSelect
id='test'
name='test'
onValueChange={e => setTestStateValue(e.value)}
label='test'
data={options}
/>
If you ever wanted to make an option selected on initial load, add defaultSelected: true, to that option.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 4.0.0
- Device: pc
- Browser: chrome
- OS: win10
- Provided sample code: No
- Provided link: No