title: Filter state in React without removing data
body: <p>I'm trying to make a react component that can filter a list based on value chosen from a drop-down box. Since the <code>setState</code> removes all data from the array I can only filter once. How can I filter data and still keep the original state? I want to be able to do more then one search.</p>
  
  <p>Array list:</p>
  
  <pre><code>  state = {
  tree: [
    {
      id: '1',
      fileType: 'Document',
      files: [
          {
            name: 'test1',
            size: '64kb'
          },
          {
            name: 'test2',
            size: '94kb'
          }
      ]
    }, ..... and so on
  </code></pre>
  
  <p>I have 2 ways that I'm able to filter the component once with:</p>
  
  <pre><code>  filterDoc = (selectedType) =&gt; {
     //way #1
     this.setState({ tree: this.state.tree.filter(item =&gt; item.fileType === selectedType) })
  
    //way#2
    const myItems = this.state.tree;
    const newArray = myItems.filter(item =&gt; item.fileType === selectedType)
    this.setState({
      tree: newArray
    })      
  }
  </code></pre>
  
  <p>Search component:</p>
  
  <pre><code>class SearchBar extends Component {
  
    change = (e) =&gt; {
      this.props.filterTree(e.target.value);
    }
  
    render() {
        return (
          &lt;div className="col-sm-12" style={style}&gt;
              &lt;input
              className="col-sm-8"
              type="text"
              placeholder="Search..."
              style={inputs}
              /&gt;
              &lt;select
              className="col-sm-4"
              style={inputs}
              onChange={this.change}
              &gt;
                  &lt;option value="All"&gt;All&lt;/option&gt;
                {this.props.docTypes.map((type) =&gt;
                  &lt;option
                    value={type.fileType}
                    key={type.fileType}&gt;{type.fileType}
                  &lt;/option&gt;)}
              &lt;/select&gt;
          &lt;/div&gt;
        )
    }
  }
  </code></pre>
  
  <p>And some images just to get a visual on the problem.
  Before filter:
  <img src="https://i.stack.imgur.com/MUFvP.png" alt="enter image description here"></p>
  
  <p>After filter, everything that didn't match was removed from the state: </p>
  
  <p><img src="https://i.stack.imgur.com/geuwc.png" alt="enter image description here"></p>