How to use the react-addons-create-fragment function in react-addons-create-fragment

};
      return cloneElement(ElementOrObject, props);
    }

    // render nested object
    return (
      <div>
        <div style="{{">{key}: {'{'}</div>
          <div style="{{">
            {renderControls(ElementOrObject, componentProperties, setComponentProperties, newKeyPath)}
          </div>
        <div>{'}'}</div>
      </div>
    );
  });
  return createFragment(controls);
};

.forEach((field, k) => row[field.label] = rowData[k]);

            // Get custom cell formatting if available
            if (this.props.getFormattedCell) {
                cell = this.props.getFormattedCell(
                    this.props.fields[j].label,
                    celldata,
                    row
                );
            } else {
                cell = {celldata};
            }
            if (cell !== null) {
                curRow.push(React.cloneElement(cell, {key: 'td_col_' + j}));
            } else {
                curRow.push(createFragment({celldata}));
            }
        }

        const rowIndexDisplay = index[i].Content;
        rows.push(
            
              {rowIndexDisplay}
              {curRow}
            
        );
    }

    let rowsPerPageDropdown = (

// the user should define their own containing block.
          // See https://github.com/Morhaus/react-list-view/issues/2
          ...(this._isControlled ? {} : translate(0, 0, 0)),
          ...style,
        }}
        onScroll={!this._isControlled && this._handleScroll}
      >
        <div style="{{">
          {createFragment(items)}
        </div>
      
    );
  }

// to short for card number
                return number;
            }

            // masked value
            if (splittedValue[0]) {
                splittedValue[0] = splittedValue[0].trim().substring(0, 4);
            }

            if (splittedValue[1]) {
                splittedValue[1] = splittedValue[1].trim().substring(0, 4);
            }

            let dot = this.renderDot(cn);
            return createFragment({
                cardNumberStart: <span>{ splittedValue[0] }</span>,
                dot1: dot,
                dot2: dot,
                dot3: dot,
                dot4: dot,
                cardNumberEnd: <span>{ splittedValue[1] }</span>
            });
        }

        return undefined;
    }

maxPropStringLength={maxPropStringLength}
          maxPropsIntoLine={maxPropsIntoLine}
        />
      
    );
    items[`c${i}`] = ',';
  });
  if (val.length > maxPropArrayLength) {
    items.last = <span>{indent(breakIntoNewLines, level)}…</span>;
  } else {
    delete items[`c${val.length - 1}`];
  }

  return (
    <span style="{valueStyles.array}">
      [{createFragment(items)}
      {indent(breakIntoNewLines, level, true)}]
    </span>
  );
}

className: 'rea11y-Field-input',
		'aria-labelledby': labels.join(' ')
	};

	if (required) {
		inputProps.required = true;
		inputProps['aria-required'] = true;
	}

	if (error) {
		inputProps['aria-invalid'] = true;
	}

	components[Field.INPUT] = cloneElement(input, inputProps);

	const fragment = createFragment(
		sortObject(components, order)
	);

	const className = classNames(
		'rea11y-Field',
		`rea11y-Field--${name}`
	);

	return (
		<div>
			{fragment}
		</div>
	);
};

items[`c${i}`] = ',';
  });
  if (val.length > maxPropArrayLength) {
    items.last = (
      <span>
        {indent(breakIntoNewLines, level)}
        {'…'}
      </span>
    );
  } else {
    delete items[`c${val.length - 1}`];
  }

  return (
    <span style="{styles.default}">
      [{createFragment(items)}
      {indent(breakIntoNewLines, level, true)}]
    </span>
  );
}

const values = set(globalComponentProps, path, value);
    setGlobalComponentProps(values);
  };

  const controls = mapValues(metadataWithControls, (prop, keyPath) => {
    const props = {
      label: keyPath,
      secondaryLabel: prop.controlType ? `${prop.controlType} (${prop.name})` : prop.name,
      value: get(globalComponentProps, keyPath),
      onUpdate: ({ value }) => updatePropertyValues(keyPath, value),
      nestedLevel,
      customMetaData: prop.customMetaData,
    };
    return cloneElement(prop.control, props);
  });
  return createFragment(controls);
};

...props
                    })} control-group${this.props.error ? ' control-group_invalid' : ''}`
                }
                role='group'
                tabIndex='-1'
                onFocus={ this.handleFocus }
                onBlur={ this.handleBlur }
                data-test-id={ this.props['data-test-id'] }
            >
                <div>
                    {
                        !!this.props.label &amp;&amp;
                        <div>{ this.props.label }</div>
                    }
                    <div>
                        { createFragment(radioGroupParts) }
                    </div>
                    {
                        (this.props.error || this.props.hint) &amp;&amp;
                        <span>
                            { this.props.error || this.props.hint }
                        </span>
                    }
                </div>
            
        );
    }

mergeChildrenForLabel = label =>
    createFragment(
      this.findInletsByLabel(label)
        .sort((i1, i2) => i1.props.index - i2.props.index)
        .map(inlet => [inlet.getId(), inlet.getChildren()])
        .reduce((acc, [id, children]) => ({ ...acc, [id]: children }), {}),
    );