Topic: MDBSelect not working (always select first value)
Mazzilli priority asked 2 years ago
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'}
]}
/>
clickstudioltd priority answered 2 years ago
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.
Yohana Habsari priority answered 2 years ago
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!
Krzysztof Wilk staff answered 2 years ago
Hi!
To avoid that you can put your data into the useState
or useMemo
hook and pass it to the component :)
Mazzilli 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.0.0
- Device: pc
- Browser: chrome
- OS: win10
- Provided sample code: No
- Provided link: No