Topic: onValueChange from MDBSelect broken???

Herzmann priority asked 1 year ago

Expected behavior

Select one of the elements, keep displaying the selection in the bar, save the selection to a state.

Actual behavior

When I select something, the state doesn't update, entire page gets rerendered (resets all other input fields), including the MDBSelect remaining on the default value constantly

Resources (screenshots, code snippets etc.)

This practically breaks everything. Whenever I remove the onValueChange Prop, the display works properly as in the selected item is displayed, but that means i can't save my selection. In this latter case, the selected item is reset whenever I choose a date using an MDBDatePicker nearby. So many bugs!!!

const [location, setLocation] = useState("");


onValueChange={(data) => {setLocation(data.text)}}


Grzegorz Bujański staff commented 1 year ago

I'm afraid that's how React works by default. In the example you provided, you update the State of your component. In the case of React, such a change causes our component to re-render, so it gets the props you pass or the default value again. What you want to do is controlled select. That means you have to make value select conditional on state. Then when the state changes, our component will re-render and get the default value your set in the state. Unfortunately, this is not easy to do at the moment. We are currently addressing this type of issue and aiming to make it easier to use control elements. We will fix it as soon as possible

genkaistudiodev free commented 11 months ago

I think if you want the page to keep the data as it is, you should the state of the page before the value changes. Keep the data inside a single state object such as const [formData, setFormData] = useState({ field1: '', field2: '', ... fieldN: '', })

And then save all the field values with a "handleInputChange" function

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 5.1.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: Yes
  • Provided link: No