I'm building a search component. I have an API endpoint to which I can add searchParams depending on what dropdown the user chooses. It also makes separate call to find out what dropdown content will include.
So a user could type in "Audi" and then the dropdowns would be pre-filled with various options like "Engine Type" - but they're optional.
The result is a response from an API containing an array of all matching vehicles. Pretty simple.
What's interesting is that the dropdowns live in their own <AdvancedDropdowns> component. On page load, the parent <Search /> which houses ` passes down the recently retrieved options, populating them upon initial render. In other words, now the dropdowns have "V4, V8" etc as options for, say, Engine dropdown.
I'm passing a handler to <AdvancedDropdowns /> so that when a user picks, say, V8 as a dropdown option, I need to do another call in real-time to the original API point except the url looks more like this: api.com/?query=audi&engine=v4. This will re-render the list but it will also re-render the child <AdvancedDropdowns /> component and thus clear out the selections.
The problem is that if they make even one selection, the handler will run, the now modified URL will be called, and as the list re-renders it's impossible to select more than one dropdown at a time because by selecting even one, the re-render clears out the list.
I've been thinking about using the re-render as an opportunity to pass the recorded selections back to the dropdown and let it set its defaults to what was already selected as it's being re-rendered but it seems a little strange.
Here's the behavior I'd like to see:
The idea is to feel as responsive of a "filter" as possible but I'm struggling since re-rendering clears out the previous dropdown selections.
Hope that makes sense.
Any advice would be appreciated.
This sounds like you're setting some state or running some side effect when that url changes.
Are you setting a piece of state that the <AdvancedDropdowns />s are using? If so, any of them that are using any piece of the state(s) that change will re-render when changed/set.
I'd recommend using multiple useState()s, one for each drop down, so when you send the api call and update the next <AdvancedDropdowns /> by setting state, it won't effect any other drop downs.