MDBSelect not working (always select first value)


Topic: MDBSelect not working (always select first value)

Mazzilli pro premium 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'}
  ]}
/>

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 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.


Yohana Habsari pro premium 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!


clickstudioltd pro premium 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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags