How to use the react.Children function in react

private _updateSelectedItem(itemKey: string, ev?: React.MouseEvent): void {
    this.setState({
      selectedKey: itemKey
    });

    const linkCollection = this._getPivotLinks(this.props);

    if (this.props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {
      const index = linkCollection.keyToIndexMapping[itemKey];

      // React.Element cannot directly convert to PivotItem.
      const item = React.Children.toArray(this.props.children)[index];

      if (_isPivotItem(item)) {
        this.props.onLinkClick(item, ev);
      }
    }
  }

const Card = ({ children, className, accent, dts }) => {
  const baseClass = 'card-component';
  const containerClassNames = [baseClass];
  if (accent) containerClassNames.push(`accent accent-${accent}`);
  if (className) containerClassNames.push(className);

  const nestedChildren = React.Children.map(children, (
    child // eslint-disable-line lodash/prefer-lodash-method
  ) => (!_.get(child, 'props.append') ? child : null));
  const appendedChildren = React.Children.map(children, (
    child // eslint-disable-line lodash/prefer-lodash-method
  ) => (_.get(child, 'props.append') ? child : null));

  return (
    <div>
      <div>{nestedChildren}</div>
      {appendedChildren}
    </div>
  );
};

export default props => {
  const children = React.Children.toArray(props.children)
  const title = children.find(child => child.type === 'h1' || child.props.mdxType === 'h1')
  const example = children.find(child =>
    child.type === 'pre' || child.props.mdxType === 'pre')

  const [ pre ] = React.Children.toArray(example.props.children)
  const preview = React.cloneElement(pre, {
    preview: true
  })

  return (

panelChildren() {
    return React.Children.toArray(this.props.children).filter(isTabPanel);
  }

export const StorySandbox = (props: StorySandboxProps) => {
    const children = React.Children.toArray(props.children);
    if (children.length === 2) {
        return <div style="{{">{props.children}</div>;
    }

    return (
        <div style="{{">
            {props.children}
            {props.children}
        </div>
    );
};

function getCode(children) {
  return React.Children.map(children, function (child) {
    return toJsxString(child) + '\n';
  }).join('');
}

const getChildChecked = (children: ReactNode) => {
  const checkedValue: Array = [];

  React.Children.map(children, (element: ReactNode) => {
    if (React.isValidElement(element)
      && element.props
      && element.props.checked) {
      checkedValue.push(element.props.value);
    }
  });

  return checkedValue;
};

export function Container({ children, className }) {
  const width = 12 / (children.length || 1);
  return (<div>
    <div>
      {React.Children.map(children, (c) =&gt; <div>{c}</div>)}
    </div>
  </div>);
}

return null;
    }

    return (
      
        
          {React.Children.map(this.props.children, (child, index) => {
            if (!React.isValidElement(child)) {
              return child;
            }

            if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {
              child = React.cloneElement(child as React.ReactElement, {
                _enableIconPadding: true
              });
            }

            if (isActiveElement(child)) {
              const isHighlightedMenuItem = this.state.highlightedIndex === index;

              return React.cloneElement(child, {
                ref: (element: MenuItem) => {
                  if (isHighlightedMenuItem) {

}, function (_ref2) {
  var children = _ref2.children,
      collapsed = _ref2.collapsed,
      rest = _objectWithoutProperties(_ref2, ['children', 'collapsed']);

  return _react2.default.createElement(
    'aside',
    rest,
    _react.Children.map(children, function (child) {
      return child ? (0, _react.cloneElement)(child, { collapsed: collapsed, width: '100%' }) : child;
    })
  );
}, function (_ref3) {
  var top = _ref3.top,