Fluent UI detailslist basic example how to pass items to the DetailsListBasicExample?

Question

I am trying to use the Fluent UI Detailslist component from here I just copied the source code and have a (older) class based component which is called DetailsListBasicExample. the component extends React component, curly braces and an IDetailsListBasicExampleState:

    export class DetailsListBasicExample extends React.Component<{},  
  IDetailsListBasicExampleState> {
  private _selection: Selection;
  private _allItems: IDetailsListBasicExampleItem[];
  private _columns: IColumn[];

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

    this._selection = new Selection({
      onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails()  
  }),
    });

    // Populate with items for demos.
    this._allItems = [];
    for (let i = 0; i < 200; i++) {
      this._allItems.push({
        sortOrder: i,
        propertyName: 'Item ' + i,
        dbID: i,
      });
    }

    this._columns = [
      { key: 'column1', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, 
    isResizable: true },
      { key: 'column2', name: 'Value', fieldName: 'value', minWidth: 100, maxWidth: 200, 
    isResizable: true },
    ];

    this.state = {
      items: this._allItems,
      selectionDetails: this._getSelectionDetails(),
    };
  }

  public render(): JSX.Element {
    const { items, selectionDetails } = this.state;

    return (
      <Fabric>
        <div className={exampleChildClass}>{selectionDetails}</div>
        <Text>
          Note: While focusing a row, pressing enter or double clicking will execute   
          onItemInvoked, which in this
          example will show an alert.
        </Text>
        <Announced message={selectionDetails} />
        <TextField
          className={exampleChildClass}
          label="Filter by name:"
          onChange={this._onFilter}
          styles={textFieldStyles}
        />
        <Announced message={`Number of items after filter applied: ${items.length}.`} />
        <MarqueeSelection selection={this._selection}>
          <DetailsList
            items={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>
      </Fabric>
    );
  }

What I do not understand is this line:

export class DetailsListBasicExample extends React.Component<{}, IDetailsListBasicExampleState>

how can I pass an objects Array to the DetailsListBasicExample? Because I would really like to populate the Itemslist but I cannot seem to figure out how to do it? I tried to call the component like this:

<DetailsListBasicExample props={propertyList}/>

where propertyList is an Array of objects. I also tried the following

DetailsListBasicExample IDetailsListBasicExampleState={propertyList}/>

but I got the famous Typescript error:

Type '{ props: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>'. Property 'props' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<...>'.

what I understand is that the property type is wrong. But how can I pass my items list sot it will work?

Has somebody an idea? I also do not get what the constructur props:{} is doing?

Answer 1

Instead of

export class DetailsListBasicExample extends React.Component<{}, IDetailsListBasicExampleState>

you can write

export class DetailsListBasicExample extends React.Component<IDetailsListBasicExampleProps, IDetailsListBasicExampleState>

then you have to specify your IDetailsListBasicExampleProps just like the state.

for example

  export interface IDetailsListBasicExampleProps {
  myItems: IMyObject[];
}

Now you can pass your items like this:

<DetailsListBasicExample myItems={  yourItemsHere  }/>

Edit: Don't forget to change the constructor as well