---
layout: page
---
# filter()
Creates a new children array with all elements that pass the test implemented by the provided function called on every child of the array.
```typescript
filter(
children: ReactNode | ReactNode[],
filterFn: (child: ReactNode, index?: number, children?: ReactNode[]): boolean,
): ReactNode[]
```
## Arguments
- children
- The children array from the element where is used.
- filterFn
- Predicate to test each element of the children array. Return true to keep the element and false to remove it. It accepts three arguments:
-
- child
- The current child element being processed.
- index
- The index of the current child element being processed.
- children
- The children array that filter was called upon.
## Return Value
A new children array with the elements that pass the test. If no elements pass the test, an empty array will be returned.
## Example
```jsx
import React, { ReactElement, ReactNode } from 'react';
import { render } from 'react-dom';
import { filter } from 'react-children-utilities';
interface Props {
children?: ReactNode;
}
const Filtered = ({ children }: Props): ReactElement => (
{filter(children, (item: ReactNode) =>
Boolean(item && (item as ReactElement).type && (item as ReactElement).type === 'span'),
)}
);
const Example = (): ReactElement => (
1
2
3
);
render(, document.body)
// Result:
//
// 1
// 3
//
```