title: How to do a search in the state (react)
body: <p>I am able to store a data array containing the login and pass objects. I created an input field in which I write what I want to find in the state. How can I filter the state and display only matching items?</p>
  <p>Constructor</p>
  <pre><code>class List extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [
          { login: &quot;login&quot;, pass: &quot;pass&quot; },
          { login: &quot;login2&quot;, pass: &quot;pass2&quot; }
        ],
        login: &quot;&quot;,
        pass: &quot;&quot;,
        find: &quot;&quot;
      };
  </code></pre>
  <p>Adding and displaying data</p>
  <pre><code>add(e) {
      e.preventDefault();
      this.setState({
        [e.target.name]: e.target.value
      });
    }
  
    show(e) {
      e.preventDefault();
  
      if (!this.state.login.length || !this.state.pass.length) {
        return;
      } else {
        const newUser = {
          login: this.state.login,
          pass: this.state.pass
        };
  
        this.setState(state =&gt; ({
          data: state.data.concat(newUser)
        }));
      }
    }
  </code></pre>
  <p>Search</p>
  <pre><code> filterUsers(e) {
      let { data } = this.state;
  
      //console.log(this.temp.login);
  
      this.setState({
        find: e.currentTarget.value
      });
    }
  </code></pre>
  <p>Render</p>
  <pre><code>&lt;input onInput={this.filterUsers.bind(this)} /&gt;
    &lt;div&gt;{this.state.find}&lt;/div&gt;
      {this.state.data.map((val, index) =&gt; (
      &lt;&gt;
        &lt;td&gt;{val.login}&lt;/td&gt;
  
        &lt;td&gt;{val.pass}&lt;/td&gt;
  
        &lt;br /&gt;
        &lt;div /&gt;
      &lt;/&gt;
  ))}
  </code></pre>