Reset button to close drop-down options when clicked

[ChrisCooper0]

I thought it would be a good addition if the Reset button not only resets the drop-down options but also closes them when clicked.

I played around with the various components but got a bit stuck and couldn't seem to get the state to be updated by the Reset button.

This might be easier/possible with Redux. @willgarrett64 or @piercy87, am I correct in understanding it's a state management library for these types of problems where components might need to share state ("open" in this instance)?

Happy for you to take a look or show me how you might go about using Redux in this instance.

[willgarrett64]

Hey @ChrisCooper0 - there are two ways I can think of implementing this:

1. With React state - not sure if you know about "lifting state up", but it basically means that instead of state living in the component in question (the drop down), it should live in mutual parent component of all components that interact with that state. So you want both the reset and drop down to interact with "open" state, so the mutual parent component is SearchFilterWrapper.

You'd have to move the "open" state into there, and then pass "open" and "setOpen" down to DropDown, and pass "setOpen" down to Reset too. This way you can add "setOpen" into the reset event handler and it will update the state for you.

The slight issue you'll have with this is that you'll actually need to make "filterOpen, setFilterOpen" and "sortingOpen, setSorting" as two separate states otherwise both drop downs would always open and close together. Alternatively keep just a single "open" state, but make it equal to an object like {filter: true, sorting: false}, and then "setOpen" would need to update this object.

2. The other way will involve redux as you said. You'll need to do the following:

• add open or filterOpen/sortingOpen into the redux store. This is in the file src/App/store.js. You could probably just look at how the other states were done and copy that.
• create a openSlice.js file in src/features. Again, see if you can look at one of the other slice files and copy/adapt to your needs.
• using the hook useSelector, access state in a component (look at CountryCardList to see an example)
• using the hook useDispatch, update the state from a component (look at Searchbar to see an example)

When I did the redux part for the sorting, I just copied what @piercy87 did and kinda tried to figure it out, but if you prefer a walkthrough over a call, I'm more than happy to do that. Adding the redux extension to your browser will be really helpful though so you can follow state updates.

The bit that might be a little more difficult (although shouldn't be too hard) is DropDown is used for both filter and sorting. You'll need a way of passing down the correct state and the update state functions to the correct DropDown.

Let me know if you'd like to have a call to go through it!

[ChrisCooper0]

Thanks for the detailed response @willgarrett64. I've heard of 'lifting state' but not used it before and as mentioned Redux is new to me so will take a look at the existing examples you mentioned and see if I can figure both options.

[willgarrett64]

Just adding the comment here - as we discussed, we may want to make it so only one drop down can be open at a time. I have an idea of how we could do this, but it would mean the DropDown component would need a little update as well as adding the Open state to the redux store.

[ChrisCooper0]

Yes that would be a good feature to add. I think we might need to update these components so that the drop-downs and the buttons are separated in the UI as someone suggested on the most recent call. Would help with the responsiveness which I think is still an outstanding issue.