# FiltersSelected

### Purpose

The FiltersSelected component is used to display a list of selected filters that can be easily removed and cleared.

### Usage

{% tabs %}
{% tab title="Basic" %}

```tsx
import React from "react";
import { FiltersSelected } from "@usereactify/search";

import { ExampleFiltersSelected } from "./ExampleFiltersSelected";

export const Component: React.FC = () => {
  return (
    <FiltersSelected
      render={ExampleFiltersSelected}
    />
  );
};
```

{% endtab %}

{% tab title="ExampleFiltersSelected" %}

```tsx
import React from "react";
import { FiltersSelectedProps } from "@usereactify/search";

export type ExampleFiltersSelectedProps = React.ComponentProps<
  NonNullable<FiltersSelectedProps["render"]>
>;

export const ExampleFiltersSelected: React.FC<ExampleFiltersSelectedProps> = (
  props
) => {
  return (
    <div className="rs__filters-selected">
      <h3 className="rs__filters-selected__name">{"Filters Selected"}</h3>
      <ul className="rs__filters-selected__list">
        {props.selectedFilters.map((selectedFilter) => (
          <ExampleFiltersSelectedItem
            selectedFilter={selectedFilter}
            handleRemove={props.handleRemove}
          />
        ))}
      </ul>
    </div>
  );
};

type ExampleFiltersSelectedItemProps = {
  selectedFilter: ExampleFiltersSelectedProps["selectedFilters"][number];
  handleRemove: ExampleFiltersSelectedProps["handleRemove"];
};

const ExampleFiltersSelectedItem: React.FC<ExampleFiltersSelectedItemProps> = (
  props
) => {
  const filtersHook = useFilters();
  const filter = filtersHook.filters?.find(
    (filter) => filter.handle === props.selectedFilter.key
  );

  return (
    <li
      key={props.selectedFilter.key}
      className="rs__filters-selected__list-item"
    >
      <label className="rs__filters-selected__list-item-label">
        <span
          className="rs__filters-selected__list-item-label"
          onClick={() => props.handleRemove(props.selectedFilter.key)}
        >
          {props.selectedFilter.label}
          {": "}
        </span>

        {filter?.displayType === "single" && filter.displayView === "range" && (
          <span className="rs__filters-selected__list-item-value">
            <span
              onClick={() =>
                props.handleRemove(props.selectedFilter.key, [
                  (props.selectedFilter.value as { label: string }).label,
                ])
              }
            >
              {(props.selectedFilter.value as { label: string }).label}
            </span>
          </span>
        )}
        {filter?.displayType === "single" && filter.displayView !== "range" && (
          <span className="rs__filters-selected__list-item-value">
            <span
              onClick={() =>
                props.handleRemove(props.selectedFilter.key, [
                  props.selectedFilter.value as string,
                ])
              }
            >
              {props.selectedFilter.value as string}
            </span>
          </span>
        )}
        {filter?.displayType === "multi" && filter.displayView === "range" && (
          <span className="rs__filters-selected__list-item-value">
            {(props.selectedFilter.value as Array<{ label: string }>).map(
              (value) => (
                <span
                  onClick={() =>
                    props.handleRemove(props.selectedFilter.key, [value.label])
                  }
                >
                  {value.label}
                </span>
              )
            )}
          </span>
        )}
        {filter?.displayType === "multi" && filter.displayView !== "range" && (
          <span className="rs__filters-selected__list-item-value">
            {(props.selectedFilter.value as Array<string>).map((value) => (
              <span
                onClick={() =>
                  props.handleRemove(props.selectedFilter.key, [value])
                }
              >
                {value}
              </span>
            ))}
          </span>
        )}
        {filter?.displayType === "slider" && (
          <span className="rs__filters-selected__list-item-value">
            <span>
              {`${filter.displaySliderPrefix}${
                (props.selectedFilter.value as any)[0]
              } to ${filter.displaySliderPrefix}${
                (props.selectedFilter.value as any)[1]
              }`}
            </span>
          </span>
        )}
      </label>
    </li>
  );
};


```

{% endtab %}
{% endtabs %}

### Props

```typescript
type FiltersSelectedProps = {
  /** Render method called once for all active filters */
  render?: React.FC<{
    selectedFilters: Array<{
      key: string;
      label: string;
      value:
        | Array<string>
        | string
        | { label: string; start: number; end: number }
        | Array<{ label: string; start: number; end: number }>;
    }>;
    handleRemove: (
      filterKey: string,
      filterValues?: Array<string | number>
    ) => void;
  }>;
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://search.docs.reactify.com.au/components/filtersselected.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.