How to use the react.Children function in react

To help you get started, we’ve selected a few react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / Pivot / Pivot.base.tsx View on Github external
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);
      }
    }
  }
github Adslot / adslot-ui / src / components / Card / index.jsx View on Github external
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>
  );
};
github rebassjs / rebass / packages / docs / src / components / recipe-card.js View on Github external
export default props =&gt; {
  const children = React.Children.toArray(props.children)
  const title = children.find(child =&gt; child.type === 'h1' || child.props.mdxType === 'h1')
  const example = children.find(child =&gt;
    child.type === 'pre' || child.props.mdxType === 'pre')

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

  return (
github CMSgov / design-system / packages / core / src / components / Tabs / Tabs.jsx View on Github external
panelChildren() {
    return React.Children.toArray(this.props.children).filter(isTabPanel);
  }
github webiny / webiny-js / packages / webiny-storybook-utils / src / Story / index.js View on Github external
export const StorySandbox = (props: StorySandboxProps) =&gt; {
    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>
    );
};
github react-display-window / react-display-window / lib / components / PlayGround.js View on Github external
function getCode(children) {
  return React.Children.map(children, function (child) {
    return toJsxString(child) + '\n';
  }).join('');
}
github ZhongAnTech / zarm / components / checkbox / CheckboxGroup.tsx View on Github external
const getChildChecked = (children: ReactNode) =&gt; {
  const checkedValue: Array = [];

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

  return checkedValue;
};
github apache / aurora / ui / src / main / js / components / Layout.js View on Github external
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>);
}
github skbkontur / retail-ui / packages / ui-kit / src / components / internal / InternalMenu / InternalMenu.tsx View on Github external
return null;
    }

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

            if (enableIconPadding &amp;&amp; (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) =&gt; {
                  if (isHighlightedMenuItem) {
github olymp / olymp / external / fela / sidebar.js View on Github external
}, 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,