I created a custom ReactiveComponent based on the official docs: https://docs.appbase.io/docs/reactivesearch/v3/advanced/reactivecomponent/
This works fine, however when I use the component and clear the filter of my custom component, how can I update the ui state of the custom component?
Using the example in the docs: When clearing the color filter, how can I update the ColorPicker UI state to reflect that no color is selected?
Haven't found anything related to this in the docs.
In case anyone else encounters the same issue: The render props of include a value object which is set to null if you clear the filters. This way it is possible to conditionally update the ColorPicker UI state (or whatever custom component you use).
If I understand clear you need to use value that coming via render prop.
Here is an example usage from my project
render={({ data, handleChange, value }) => {
return (
<div
role="listbox"
aria-label="SpecialCategoryFilter-items"
className="list-filter"
>
{data.map((item) => (
<p
className="button-large-item"
key={item.key}
role="option"
aria-checked={value[item.key] ? true : false}
aria-selected={value[item.key] ? true : false}
>
<input
style={{ display: "none" }}
type="checkbox"
value={item.key}
onChange={(e) => {
handleChange(e);
}}
id={"SpecialCategoryFilter-" + item.key}
name={"SpecialCategoryFilter-" + item.key}
/>
<label
htmlFor={"SpecialCategoryFilter-" + item.key}
>
<span>{item.key}</span>
</label>
</p>
))}
</div>
);
}}
