title: React - Filter list by gender or age
body: <p>I have a list of users with name, gender, age, etc from the following api: [<a href="https://gorest.co.in/public-api/users]" rel="nofollow noreferrer">https://gorest.co.in/public-api/users]</a>. At the moment I can filter by <code>gender === female</code>, but doesn't work when I filter for <code>gender === male</code>.</p>
  
  <p>Also, I try to filter the list of users by age. I get the date of birth and sorted afterwards, but it doesn't seem enough.</p>
  
  <p>I have a <a href="https://codesandbox.io/s/fancy-cdn-n9mpm" rel="nofollow noreferrer">LIVE EXAMPLE HERE</a></p>
  
  <p>Here is the code: </p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import axios from "axios";
  
  export default class UserList extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        list: [],
        search: ""
      };
    }
  
    componentDidMount() {
      this.getList();
    }
  
    /* get users list */
    getList = async () =&gt; {
      const api = 'https://gorest.co.in/public-api/users?_format=json&amp;access-token=3qIi1MDfD-GXqOSwEHHLH73Y3UitdaFKyVm_';
  
      await axios
        .get(api)
        .then(response =&gt; {
          const list = response.data.result;
          this.setState({
            list,
            isLoading: false
          });
        })
        .catch(err =&gt; {
          console.log(err);
        });
    };
  
    /* handler for search bar */
    handleChange = e =&gt; {
      this.setState({
        search: e.target.value
      });
    };
  
    filterGender = gender =&gt; {
      const lowerCaseGender = gender.toLowerCase();
      const filteredGender = this.state.list.filter(
        user =&gt; user.gender.toLowerCase().indexOf(lowerCaseGender) !== -1
      );
  
      this.setState({ list: filteredGender }, () =&gt; console.log(this.state.list));
    };
  
    filterAge = () =&gt; {
      const ageList = this.state.list.map(age =&gt; {
        return age.dob;
      });
  
      const filteredAge = this.state.list.filter(
        e =&gt; e.dob.indexOf(ageList) !== -1
      );
  
      this.setState({ list: filteredAge }, () =&gt; console.log(this.state.list));
    };
  
    render() {
      let style = {
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
        padding: "1rem",
        gridGap: "1rem 1rem"
      };
  
      return (
        &lt;div&gt;
          &lt;input
            placeholder="Search for a user..."
            onChange={e =&gt; this.handleChange(e)}
          /&gt;
          &lt;button onClick={() =&gt; this.filterGender("male")}&gt;Male&lt;/button&gt;
          &lt;button onClick={() =&gt; this.filterGender("female")}&gt;Female&lt;/button&gt;
          &lt;button onClick={() =&gt; this.filterAge()}&gt;Age&lt;/button&gt;
          &lt;ul style={style}&gt;
            {this.state.list.map(user =&gt; {
              return (
                &lt;li key={user.id}&gt;
                  &lt;div&gt;
                    &lt;img className="thumb" alt="" src={user._links.avatar.href} /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="userInfo"&gt;
                    &lt;p&gt;
                      {user.first_name} {user.last_name}
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
              );
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Thank you!</p>