How to use the react.cloneElement function in react

      return data.map((item, i) => React.cloneElement(lastChild, {
        /* eslint-disable react/no-array-index-key */
        key: `child-${i}`,
        /* selint-enable react/no-array-index-key */
        index: i,
        first: i === 0,
        last: i === len,
        odd: odd(i),
        data: item,
        ...item,
      }));
    }

return React.Children.map(children, child =>
      cloneElement(child, { ...rest })
    );

let fn = child =>
        React.cloneElement(child, {
          onClick:this.selectItem.bind(this, child.props.value)
        })
      let items = React.Children.map(this.props.children, fn);

let ref = c => {
            this.menu = c;
        };

        if (typeof child.ref === 'string') {
            warning(
                false,
                'String refs are not supported on `` components. ' +
                'To apply a ref to the component use the callback signature:\n\n ' +
                'https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute'
            );
        } else {
            ref = chainedFunction(child.ref, ref);
        }

        return cloneElement(child, {
            ...props,
            ref,
            onClose: chainedFunction(
                child.props.onClose,
                onClose,
                this.closeDropdown
            ),
            onSelect: chainedFunction(
                child.props.onSelect,
                onSelect,
                this.closeDropdown
            ),
            rootCloseEvent
        });
    }

return this.props.value.map((chip, idx) => {
      return (
        React.cloneElement(this.props.renderChip(chip, this.props.chipTheme), {
          selected: this.state.chipSelected && idx === this.props.value.length - 1,
          onRemove: this.removeChip(idx),
          index: idx,
          key: `chip${idx}`,
        })
      );
    });
  }

lineComponent,
    role,
    shapeRendering,
    className,
    wickStrokeWidth,
    transform,
    style
  } = props;
  const wickStyle = defaults({ strokeWidth: wickStrokeWidth }, style);
  const sharedProps = { role, shapeRendering, className, transform, clipPath, ...events };
  const candleProps = assign(getCandleProps(props, style), sharedProps);
  const highWickProps = assign(getHighWickProps(props, wickStyle), sharedProps);
  const lowWickProps = assign(getLowWickProps(props, wickStyle), sharedProps);

  return React.cloneElement(groupComponent, {}, [
    React.cloneElement(rectComponent, candleProps),
    React.cloneElement(lineComponent, highWickProps),
    React.cloneElement(lineComponent, lowWickProps)
  ]);
};

render() {
    const element = React.Children.only(this.props.children);
    const elementChildren = React.Children.only(element.props.children);

    return React.cloneElement(element, {
      ...element.props,
      ref: (node) => {
        this.$scroller = node;
        this.props.getRef(node);
      },
      onScroll: this.onScroll,
      children: React.cloneElement(elementChildren, {
        children: [
          ...React.Children.toArray(elementChildren.props.children),
          this.scrollArea(),
        ],
      }),
    });
  }
}

<div>
                            {children &amp;&amp;
                                React.cloneElement(children, {
                                    resource,
                                    ids,
                                    data,
                                    currentSort: {
                                        field: query.sort,
                                        order: query.order,
                                    },
                                    basePath,
                                    isLoading,
                                    setSort: this.setSort,
                                })}
                            {pagination &amp;&amp;
                                React.cloneElement(pagination, {
                                    total,
                                    page: parseInt(query.page, 10),
                                    perPage: parseInt(query.perPage, 10),
                                    setPage: this.setPage,
                                })}
                        </div>
                    ) : (
                        
                            {translate('aor.navigation.no_results')}
                        
                    )}
                
            
        );
    }
}

cloneWithProps() {
    if (React.Children.count(this.props.children) < 2) {
      return (
        <p>
          {this.props.children &amp;&amp; React.cloneElement(this.props.children, {
            hasAddons: true,
          })}
        </p>
      );
    }
    return this.props.children.map((child, i) =&gt; (
      <p>
        {React.cloneElement(child, { hasAddons: true })}
      </p>
    ));
  }