Topic: onValueChange from MDBSelect broken???
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)}}
...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 5.1.0
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 2 years 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 commented a year 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