How to show sharepoint lookup value on details lsit column?

Question

I am trying to display sharepoint lookup value on DetailsList of Office UI Fabric in SPFx React webparts project but I am not able to do it. Can anyone help me acheive this? Thank you.

item value format is shown below

[
 {
   Id   : 0,
   Title : "test0",
   Body : {
            Body_p1: "test0_p1",
            Body_p2: "test0_p2"
          },
  },
  {
   Id  : 1,
   Title : "test1",
   Body : {
            Body_p1: "test1_p1",
            Body_p2: "test1_p2"
          }
  }
] 

and I want to use this control. https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist

I want to display above data like this.

|Id | Title | Body
|0  | test0 | test0_p1
|1  | test1 | test1_p1

or

|Id | Title | Body
|0  | test0 | test0_p2
|1  | test1 | test1_p2

This is SPFx webparts react project for sharepoint online.

I tired blow code but Body.Body_p1 and Body.Body_p2 values are not shwon.

Note. Item values are in {items} and I fllowed this instruction. https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/basic

export interface IListItem{
  Id: number;
  Title: string;
  Body : {
           Body_p1: string;
           Body_p2: string;
  };
}

export interface IReactExState{
  items: IListItem[];
}

export default class ReactEx extends React.Component<IReactExProps, IReactExState>{

//some code here

private _columns: IColumn[];

if(/*conditions*/){
   this._columns = [
        { key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
        { key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
        { key: 'Body', name: 'Body', fieldName: 'Body.Body_p1', minWidth: 200, maxWidth: 400, isResizable: true },
    ];
}
else{
   this._columns = [
        { key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
        { key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
        { key: 'Body', name: 'Body', fieldName: 'Body.Body_p2', minWidth: 200, maxWidth: 400, isResizable: true },
    ];
}

public render(): React.ReactElement<IReactExProps>{

 return(
   {/*some code here*/}
   <MarqueeSelection selection={this._selection}>
            <DetailsList
              items={items}
              columns={this._colmns}
              setKey="RequestID"
              layoutMode={DetailsListLayoutMode.justified}
              selection={this._selection}
              selectionPreservedOnEmptyClick={true}
              ariaLabelForSelectionColumn="Toggle selection"
              ariaLabelForSelectAllCheckbox="Toggle selection for all items"
              checkButtonAriaLabel="Row checkbox"
              onItemInvoked={this._onItemInvoked}
            />
    </MarqueeSelection>
    {/*somec ode here*/}
  );
}

Answer 1

You need to use **onRender** property which is available in IColumn 

onRender: (item) => (<div>{item["LookupName"]["Title"]}</div>) 

You can conditionally render like this 



 onRender: (item) => (      
                        {item["LookupName"] !=undefined ?<div>item["LookupName"]["Title"] 
                         </div> : "NA" }
                        ) 

Answer 2

Sample Demo:

import * as React from 'react';
import styles from './OfficeFabric.module.scss';
import { IOfficeFabricProps } from './IOfficeFabricProps';
import { escape } from '@microsoft/sp-lodash-subset';

import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';

export interface IListItem{
  Id: number;
  Title: string;
  Body : {
           Body_p1: string;
           Body_p2: string;
  };
}

export interface IReactExState{
  items: IListItem[];
  selectionDetails: {};
}

export default class OfficeFabric extends React.Component<IOfficeFabricProps, IReactExState> {

  private _selection: Selection;
  private _allItems: IListItem[];
  private _columns: IColumn[];

  public constructor(props: IOfficeFabricProps,state: IReactExState){ 
    super(props); 
    this._selection = new Selection({
      onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
    });
    this._allItems = [
      {
        Id   : 0,
        Title : "test0",
        Body : {
                 Body_p1: "test0_p1",
                 Body_p2: "test0_p2"
               },
       },
       {
        Id  : 1,
        Title : "test1",
        Body : {
                 Body_p1: "test1_p1",
                 Body_p2: "test1_p2"
               }
       }
     ];
    this._columns = [
      { key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
      { key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
      { key: 'Body', name: 'Body', minWidth: 200, maxWidth: 400, isResizable: true,onRender: (item) => (
        <div>          
         {item.Body.Body_p1}
          </div>) },
  ];
    this.state = { 
      items:this._allItems,
      selectionDetails: this._getSelectionDetails() 
    }; 
  }

  private _getSelectionDetails(): string {
    const selectionCount = this._selection.getSelectedCount();

    switch (selectionCount) {
      case 0:
        return 'No items selected';
      case 1:
        return '1 item selected: ' + (this._selection.getSelection()[0] as IListItem).Title;
      default:
        return `${selectionCount} items selected`;
    }
  }

  private _onItemInvoked = (item: IListItem): void => {
    alert(`Item invoked: ${item.Title}`);
  };

  public render(): React.ReactElement<IOfficeFabricProps> {
    return (
      <div className={ styles.officeFabric }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <MarqueeSelection selection={this._selection}>
              <DetailsList
                items={this.state.items}
                columns={this._columns}
                setKey="set"
                layoutMode={DetailsListLayoutMode.justified}
                selection={this._selection}
                selectionPreservedOnEmptyClick={true}
                ariaLabelForSelectionColumn="Toggle selection"
                ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                checkButtonAriaLabel="Row checkbox"
                onItemInvoked={this._onItemInvoked}
              />
            </MarqueeSelection>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
              <Icon iconName='Mail' />
              <br/>
              <Icon iconName='CirclePlus' />
              <br/>
              <Icon iconName='LocationDot' />
            </div>
          </div>
        </div>
      </div>
    );
  }
}