title: streamline react filter function
body: <p>I've created a filter function in React. The user would type a search term into the input and the list would filter correctly. However, when the user erased the last letter the list would not update back to the previous results. To remedy this I had to setState twice, once to render the original array of items, and once to render filtered items:</p>
  
  <pre><code>  componentDidMount() {
      fetch("https://jsonplaceholder.typicode.com/users")
        .then(response =&gt; response.json())
        .then(users =&gt; {
          this.setState({ filteredUsers: users });
          this.setState({ users });
        });
    }
  </code></pre>
  
  <p>The filter function looks like this and is updated via <code>onChange</code> from the input:</p>
  
  <pre><code>  filterList = event =&gt; {
      let updateUsers = this.state.users;
      updateUsers = updateUsers.filter(user =&gt; {
        return (
          user.name.toLowerCase().search(event.target.value.toLowerCase()) !== -1
        );
      });
      this.setState({ filteredUsers: updateUsers });
    };
  </code></pre>
  
  <p>I then render the component with <code>filteredUsers</code>:</p>
  
  <pre><code>  render() {
      const { filteredUsers } = this.state;
      return (
        &lt;div className="App"&gt;
          &lt;input type="text" placeholder="Search" onChange={this.filterList} /&gt;
          &lt;div className="list"&gt;
            &lt;List users={filteredUsers} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>The question is whether I can streamline the process a bit without having to set State twice with the same data. Following DRY principles I find it unnecessary to do this, but fail to see how else I could make the filtering work.</p>
  
  <p>Also, I plan on implementing several more filters to further limit search results, so the answer should have scalability in mind.</p>
  
  <p>Check the components on <a href="https://codesandbox.io/s/ko6yky6wvr" rel="nofollow noreferrer">codesandbox</a></p>