Children

How to get Children

import { Children } from 'fds/system';

Type: Class

An alternative to ReactDOM.Children which automatically excludes falsy children: meaning every child that evaluate to false; using !!child, is excluded.

Static methods

Name Description
count

Count the given React children, automatically excluding falsy children: meaning every child that evaluate to false; using !!child, is excluded.


  Arguments
# Name Type Description
1. children ReactNode

Defaults to an empty array if null/undefined/falsy

  Returns

Type: Number

The total number of children.

filter

Loop over the given React children using the given forEachFn, automatically excluding falsy children: meaning every child that evaluate to false; using !!child, is excluded.


  Arguments
# Name Type Description
1. children ReactNode

Defaults to an empty array if null/undefined/falsy

2. filterFn Children~filterCallback
  Returns

Type: Array<ReactElement>

A plain JS Array of React elements.

forEach

Loop over the given React children using the given forEachFn, automatically excluding falsy children: meaning every child that evaluate to false; using !!child, is excluded.


  Arguments
# Name Type Description
1. children ReactNode

Defaults to an empty array if null/undefined/falsy

2. forEachFn Children~forEachCallback
map

Map the given React children using the given mapFn, automatically excluding falsy children: meaning every child that evaluate to false; using !!child, is excluded.

To add/remove certain props on an individual child, use React.cloneElement.


  Arguments
# Name Type Description
1. children ReactNode

Defaults to an empty array if null/undefined/falsy

2. mapFn Children~mapCallback
toArray

Convert the given React children to a plain JS array, automatically excluding falsy children: meaning every child that evaluate to false; using !!child, is excluded.


  Arguments
# Name Type Description
1. children ReactNode

Defaults to an empty array if null/undefined/falsy

  Returns

Type: Array<ReactElement>

A plain JS Array of React elements.

Was this page helpful?