[filter-panel] React wrapper: Expose component state as something easily consumable by React

[bdsqqq]

The problem

I find it hard to use this component because it needs me to handle the synchronization between the component's internal state and react state. It is quite simple when the filter panel is the only thing that mutates a particular state but making the filter panel react to other components mutating state gets complicated fast and has a lot of imperative code attached to it.

The solution

I would like if the component exposed a consumable piece of state that updates the filter panel when mutated.

Application/website

https://www.ibm.com/events/

Business priority

Low Priority = release date is not dependent on fix or not upcoming

What time frame would this ideally be needed by (if applicable)

No response

Examples

This sandbox shows an implementation I made with the current component. It shows how the component interacts with state that is changed by other components.
One curious edge case I found happens when you:

1. Select a filter by clicking one of the checkboxes
2. Use the button "remove [filterName]" to remove the selection

The filterPanel component will react to the change due to a useEffect, but only the total number of selected filters will be updated, the filter that you just removed from selection will continue with a check.
Similarly, if you selected a filter by using the text input (for example, typing "On demand" and pressing enter) the filter panel would react, the total number of selected filters would update, but the checkbox would continue empty.
This could be solved by including the an method to update the checkboxes in a useEffect but I think this behavior should be included out of the box.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[RobertaJHahn]

@IgnacioBecerra Would to work around be to use the Web Components version directly?

[IgnacioBecerra]

@bdsqqq It's possible that using the Web Components version directly might help, but we might have to investigate further.

cc: @RobertaJHahn

[stale]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[jhossain1]

!stale

[stale]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.