3

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} />
            );

        };
}
  • how about modifying the code as public render(): React.ReactElement<ITableViewProps> and checking ? – Gautam Sheth Jul 12 '18 at 15:34
  • hello Gautham, thank you for the hint. unfortunately replacing JSX.Element by React.ReactElement<ITableViewProps> after the render() function doesn't bring a change in the behaviour. – Lachezar Stefanov Jul 13 '18 at 7:06
0

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

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

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 office-ui-fabric-react@5.113.1 and see if that works for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.