How to use the semantic-ui-react.Segment function in semantic-ui-react

remove = _props.remove,
          addNewItem = _props.addNewItem,
          nextPage = _props.nextPage,
          previewsPage = _props.previewsPage;

      var header = schema.listHeader;
      var headerToString = this.headerToString;

      var idType = '';
      schema.fields.forEach(function (obj) {
        if (data[0] && Object.keys(obj)[0] === Object.keys(data[0])[0]) {
          idType = obj[Object.keys(obj)[0]].fieldType;
        }
      });
      return _react2.default.createElement(
        _semanticUiReact.Segment,
        { color: 'black', className: 'View' },
        _react2.default.createElement(
          _semanticUiReact.Table,
          { celled: true, className: 'List' },
          _react2.default.createElement(
            _semanticUiReact.Table.Header,
            null,
            _react2.default.createElement(
              _semanticUiReact.Table.Row,
              null,
              _react2.default.createElement(
                _semanticUiReact.Table.HeaderCell,
                null,
                '#/ID'
              ),
              _react2.default.createElement(

),
        _react2.default.createElement(
          _semanticUiReact.Message,
          { color: 'green', id: 'ms-success' },
          'Success!'
        ),
        _react2.default.createElement(
          _semanticUiReact.Message,
          { color: 'red', id: 'ms-error' },
          'Error!'
        ),
        _react2.default.createElement(
          Column,
          { computer: 13, mobile: 16 },
          viewMode ? !viewData && currentItemId ? _react2.default.createElement(
            _semanticUiReact.Segment,
            { className: 'loading-block' },
            _react2.default.createElement(
              'div',
              { className: 'ui active dimmer' },
              _react2.default.createElement(_semanticUiReact.Loader, { content: 'Loading' })
            )
          ) : _react2.default.createElement(_View2.default, {
            ref: 'View',
            query: query,
            data: !viewData ? false : viewData.data[resolverForList][0] ? viewData.data[resolverForList][0] : viewData.data[resolverForList],
            fields: fields,
            update: update,
            remove: remove,
            currentItemId: currentItemId,
            addNewItem: addNewItem,
            routeToAdd: routeToAdd,

remove = _props.remove,
          addNewItem = _props.addNewItem;
      var generateFields = this.generateFields;

      var to = (fields.length / 2).toFixed(0);
      var from = fields.length - to;
      return _react2.default.createElement(
        'div',
        null,
        this.state.editText ? _react2.default.createElement(_Editor2.default, {
          element: this.state.editText,
          upload: this.props.uploadFile,
          path: this.props.schema.uploadPath ? this.fixPath(this.props.schema.uploadPath) : this.props.schema.typeName
        }) : null,
        _react2.default.createElement(
          _semanticUiReact.Segment,
          { color: 'black', className: 'View' },
          _react2.default.createElement(
            'div',
            { className: 'btn-row' },
            currentItemId ? _react2.default.createElement(
              _semanticUiReact.Button,
              {
                type: 'submit',
                color: 'black',
                onClick: addNewItem,
                disabled: !schema.resolvers.create || !schema.resolvers.create.allowed
              },
              'add new'
            ) : null,
            _react2.default.createElement(
              _semanticUiReact.Button,