Office UI Fabric DetailsList(React) rendering: DetailsColumn.render() error

Question

I am trying to add a very basic implementation of the Office UI Fabric's DetailsList React component to my project, but keep on getting the following error when trying to render it: 'DetailsColumn.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.'

Below follows the code sample I'm trying to implement. I tried to make it as simple as possible so I have a starting point I could upgrade on, but seem unable to figure out what's missing. Any ideas?

import {
    DetailsList,
    IColumn,
    SelectionMode
} from 'office-ui-fabric-react';


export class TableView extends React.Component< ITableViewProps, ITableViewState> {

    constructor(props: ITableViewProps) {
        super(props);
    }

    public render(): JSX.Element {

            const columns: IColumn[] = [
                {
                key: 'Title',
                name: 'Title',
                fieldName: 'title',
                minWidth: 50
            }
        ];

            let test: any[] = [{Title: "TestTitle"}];

            return (
                    <DetailsList items={test} columns={columns} />
            );

        };
}

Answer 1

Your DetailsList component should be wrapped by Div element inside the return function as shown below.

return (
               <div> <DetailsList items={test} columns={columns} /> </div>
        );

Answer 2

This looks to be an issue with a recent release of office-ui-fabric-react.

I was having a similar problem, but reverting back to 5.113.1 solved the problem.

Try running the command npm install [email protected] and see if that works for you.