title: React + SPFx I get my empty list and only get the items by manipulating them
body: <p>I'm creating a Sharepoint list viewer with filtering and search. When the WebPart loads the list appears empty and only shows the items when I do a search or filter. When I delete the search or filter all the items appear. How can I show all items from the beginning?</p>
  
  <p><a href="https://i.stack.imgur.com/xBEq4.png" rel="nofollow noreferrer">initial state</a></p>
  
  <p><a href="https://i.stack.imgur.com/8KMwf.png" rel="nofollow noreferrer">after typing "a" (as an example)</a></p>
  
  <p>child class code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export class MisContactos extends React.Component&lt;any, any&gt;{
  
    private _selection: Selection;
  
    constructor(props: {}) {
  
      super(props);
      
      var misItems = this.props._items;
      const columns: IColumn[] = [
        {
          key: 'column1',
          name: 'ID',
          fieldName: 'ID',
          minWidth: 50,
          maxWidth: 350,
          isRowHeader: true,
          isResizable: true,
          isSorted: true,
          isSortedDescending: false,
          sortAscendingAriaLabel: 'Sorted A to Z',
          sortDescendingAriaLabel: 'Sorted Z to A',
          onColumnClick: this._onColumnClick,
          data: 'string',
          isPadded: true
        },
        {
          key: 'column2',
          name: 'Name',
          fieldName: 'Title',
          minWidth: 110,
          maxWidth: 350,
          isRowHeader: true,
          isResizable: true,
          isSorted: true,
          isSortedDescending: false,
          sortAscendingAriaLabel: 'Sorted A to Z',
          sortDescendingAriaLabel: 'Sorted Z to A',
          onColumnClick: this._onColumnClick,
          data: 'string',
          isPadded: true
        },
        {
          key: 'column3',
          name: 'Nachname',
          fieldName: 'Nachname',
          minWidth: 110,
          maxWidth: 350,
          isRowHeader: true,
          isResizable: true,
          isSorted: true,
          isSortedDescending: false,
          sortAscendingAriaLabel: 'Sorted A to Z',
          sortDescendingAriaLabel: 'Sorted Z to A',
          onColumnClick: this._onColumnClick,
          data: 'string',
          isPadded: true
        },
        {
          key: 'column4',
          name: 'Firmen',
          fieldName: 'Company',
          minWidth: 110,
          maxWidth: 350,
          isRowHeader: true,
          isResizable: true,
          isSorted: true,
          isSortedDescending: false,
          sortAscendingAriaLabel: 'Sorted A to Z',
          sortDescendingAriaLabel: 'Sorted Z to A',
          onColumnClick: this._onColumnClick,
          data: 'string',
          isPadded: true
        },
        {
          key: 'column5',
          name: 'Email',
          fieldName: 'Email',
          minWidth: 150,
          maxWidth: 350,
          isRowHeader: true,
          isResizable: true,
          isSorted: true,
          isSortedDescending: false,
          sortAscendingAriaLabel: 'Sorted A to Z',
          sortDescendingAriaLabel: 'Sorted Z to A',
          onColumnClick: this._onColumnClick,
          data: 'string',
          isPadded: true
        },
        {
          key: 'column6',
          name: 'Land',
          fieldName: 'Land',
          minWidth: 100,
          maxWidth: 350,
          isRowHeader: true,
          isResizable: true,
          isSorted: true,
          isSortedDescending: false,
          sortAscendingAriaLabel: 'Sorted A to Z',
          sortDescendingAriaLabel: 'Sorted Z to A',
          onColumnClick: this._onColumnClick,
          data: 'string',
          isPadded: true
        },
        {
          key: 'column7',
          name: 'Abteilung',
          fieldName: 'Abteilung',
          minWidth: 100,
          maxWidth: 350,
          isRowHeader: true,
          isResizable: true,
          isSorted: true,
          isSortedDescending: false,
          sortAscendingAriaLabel: 'Sorted A to Z',
          sortDescendingAriaLabel: 'Sorted Z to A',
          onColumnClick: this._onColumnClick,
          data: 'string',
          isPadded: true
        }
      ];
  
      this._selection = new Selection({
        onSelectionChanged: () =&gt; {
          this.setState({
            selectionDetails: this._getSelectionDetails()
          });
        }
      });
  
      this.state = {
        items: misItems,
        columns: columns,
        selectionDetails: this._getSelectionDetails(),
        isModalSelection: false,
        isCompactMode: false      
      };
  
    } 
  
    public render() {
  
      var { columns, isCompactMode, items, selectionDetails, isModalSelection, paises } = this.state;
  
      return (&lt;Fabric&gt;
        &lt;div className={classNames.controlWrapper}&gt;
          &lt;Toggle
            label="Enable compact mode"
            checked={isCompactMode}
            onChange={this._onChangeCompactMode}
            onText="Compact"
            offText="Normal"
            styles={controlStyles}
          /&gt;
          &lt;Stack&gt;
            
            &lt;Checkbox
              label="Spanien"
              value="Spanien"
              styles={controlStyles}
              onChange={ e =&gt; {this._onSpanien} }
              defaultChecked = {false}
            /&gt;
            &lt;Checkbox 
              label="Deutschland"
              styles={controlStyles}
              onChange={this._onDeutschland}
              defaultChecked = {false}
            /&gt;
          &lt;/Stack&gt;
  
          &lt;Toggle
            label="Toogle"
            checked={isModalSelection}          
            onText="Modal"
            offText="Normal"
            styles={controlStyles}
          /&gt;
          
          &lt;TextField label="Filter by name" onChange={this._onChangeText} styles={controlStyles} /&gt;
        &lt;/div&gt;
        &lt;div className={classNames.selectionDetails}&gt;{selectionDetails}&lt;/div&gt;
        &lt;MarqueeSelection selection={this._selection}&gt;
          &lt;DetailsList
            items={items}
            compact={isCompactMode}
            columns={columns}
            selectionMode={isModalSelection ? SelectionMode.multiple : SelectionMode.none}
            
            setKey="set"
            layoutMode={DetailsListLayoutMode.justified}
            isHeaderVisible={true}
            selection={this._selection}
            selectionPreservedOnEmptyClick={true}
            onItemInvoked={this._onItemInvoked}
            enterModalSelectionOnTouch={true}
            ariaLabelForSelectionColumn="Toggle selection"
            ariaLabelForSelectAllCheckbox="Toggle selection for all items"
            checkButtonAriaLabel="Row checkbox"
          /&gt;
        &lt;/MarqueeSelection&gt;
      &lt;/Fabric&gt;
      );
    } 
    
    
    public componentDidUpdate(previousProps: any, previousState: IDetailsListDocumentsState) {
      if (previousState.isModalSelection !== this.state.isModalSelection &amp;&amp; !this.state.isModalSelection) {
        this._selection.setAllSelected(false);
      }
    }  
  
    
    private _onChangeText = (ev: React.FormEvent&lt;HTMLInputElement | HTMLTextAreaElement&gt;, text: string): void =&gt; {
      var misItems2: IlistContactosItems[];
      misItems2 = JSON.parse(JSON.stringify(this.props._items));
      console.log("pasa por onChangeText");
  
      this.setState({
        items: text ? misItems2.filter(i =&gt; i.Title.toLowerCase().indexOf(text) &gt; -1) : misItems2
      });
    }  
    
  }
  
  export default MisContactos</code></pre>
  </div>
  </div>
  </p>
  
  <p>and the father class code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>export default class AaReact1 extends React.Component&lt;IAaReact1Props, any&gt; {
  
    constructor(props: IAaReact1Props, any) {
      super(props);
  
      this.state = {
        links: []
      };
    }
    public componentDidMount() {
      this.getContactosListData();
    }
  
    public render(): React.ReactElement&lt;IAaReact1Props&gt; {
      console.log("render");
      return (
        &lt;div className={styles.aaReact1}&gt;
          &lt;MisContactos header={this.props.description} _items={this.state.links} /&gt;
        &lt;/div&gt;
      );
    }
    private getContactosListData(): Promise&lt;any&gt; {
      return this.props.spClientContext.get("https://Mock.sharepoint.com/sites/yo/_api/web/lists/getbytitle('Kontakte')/items?Odata=minimal",
        SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) =&gt; {
          return response.json();
        }).then(data =&gt; {
          data=JSON.parse(JSON.stringify(data));
          this.setState({ links: data.value });
  
        });
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for your time and help.</p>