# ItemFilter

The ItemFilter component can be used to filter items by type, date modified, date created, and by folder. It can be used in combination with the ItemTable to display items in a user's ArcGIS account.

A basic implementation requires props returned from the `useItemBrowserState()` React hook as well as an [ArcGIS userSession](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/):

```js
import { UserSession } from "@esri/arcgis-rest-auth";

const App = () => {
  /* useItemBrowserState manages ItemBrowser state using useReducer.  
  Returns queryResults from interacting with filters, 
  as well as functions to manage query updates 
  and interactions with ItemTable */

  const {
    queryResults,
    searchTermProps,
    ...itemBrowserProps
  } = useItemBrowserState(userSession);

  return (
    <StyledApp>
      <StyledItemFilterWrapper>
        <ItemFilter userSession={userSession} {...itemBrowserProps} />
        <ItemTableWrapper>
          <input
            name={"folder-search"}
            placeholder="Filter items..."
            type="search"
            /* User can use any type of text input of choice.  
            It is necessary to spread the searchTermProps 
            into the search field component. 
            The searchTermProps is an object consisting 
            of the following properties:

              const searchTermProps = {
                value: string,
                onChange: () => {},
                onRequestClear: () => {},
              };
             */
            {...searchTermProps}
          />
          <ItemTable
            queryResults={queryResults}
            onItemClicked={(item) => console.log(item)}
            userSession={userSession}
            {...itemBrowserProps}
          />
        </ItemTableWrapper>
      </StyledItemFilterWrapper>
    </StyledApp>
  );
};
```

<!-- Auto Generated Below -->

## Properties

| Property            | Description                                                                      | Type                                                                                | Default | Required |
| ------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------- | -------- |
| `itemBrowserState`  | Object containing ItemFilter state. Returned by useItemBrowserState() React hook | `object`                                                                            | N/A     | True     |
| `handleStateUpdate` | Function that is called upon updating ItemFilter state                           | `function`                                                                          | N/A     | True     |
| `userSession`       | ArcGIS UserSession                                                               | [`ArcGIS userSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) | N/A     | True     |