title: Unhandled Rejection (TypeError): this.method.then is not a function
body: <p>I'm using React to build a website. On one of the pages, users can see all users' profiles and select tags to filter them. In addition to the tags selected, I also keep the list of users displayed in the state of the component for another feature. Therefore, when the user clicks or un-clicks a tag, not only the list of tags (called "filters") but also the currently displayed users' profiles (called "currentprofilelist") will be changed. Below is my code to achieve this feature: "updateTasks" is called when the user clicks a tag, which calls "onlyFilters" to change the "filters" field in the state. Then "onlyFilters" returns the new filters, which is passed to filtersUpdateList to modify the "currentprofilelist" in the state. I got the error: <strong>"Unhandled Rejection (TypeError): this.onlyFilters(...).then is not a function"</strong> and am wondering how I can fix it. I tried adding "return" before it and it still did not work. Thanks for your patience!</p>
  
  <pre><code>
      const filters = [
  
      ......
  
      ]
  
      state = {
        ......
        filters: [],
        currentprofilelist: []
      }
  
     componentDidMount() {
        const { users } = this.props;
        this.setState({
          currentprofilelist: users
        })
      }
  
      ......
  
      onlyFilters = (e) =&gt; {
        if (e.target.className === "unselected-button") {
          const helper = this.state.filters;
          helper.push(e.target.id);
          this.setState({ filters : helper });
          e.target.className = "selected-button";
          return helper;
         }
          else {
            const newfilters = this.state.filters.filter(tag =&gt; tag !== e.target.id);
            this.setState({ filters : newfilters });
            e.target.className = "unselected-button";
            return newfilters;
          }
      }
  
      filtersUpdateList = (newfilters) =&gt; {
        const { users } = this.props;
        var newprofilelist = [];
        var i = 0;
        while (i &lt; users.length) {
          if (newfilters.every(t =&gt; users[i].profile.areas_of_interest &amp;&amp; users[i].profile.areas_of_interest.includes(t))) {
            newprofilelist.push(users[i].id);
          }
        }
        this.setState({currentprofilelist: newprofilelist});
      }
  
      updateFilters = async (e) =&gt; {
        e.preventDefault();
        this.onlyFilters(e)
        .then((newfilters) =&gt; {
          this.filtersUpdateList(newfilters);
        })
      }
  
      ......
  
     render() {
  
          const { auth, users, profile } = this.props;
  
          return (
           ......
            &lt;Container fluid style={{ marginLeft:"70px", display: "flex", alignItems: "center",  zIndex: "-1"}}&gt;
  
              &lt;div className="filter-container"&gt;
              &lt;li&gt;Filter by interests!&lt;/li&gt;
              &lt;div className="form-inline"&gt;
                {filters.map(filter =&gt; {
                  return (
                    &lt;div className="unselected-button" id={filter} onClick={this.updateFilters}&gt;
                      {filter}
                      &lt;/div&gt;
                  );
                })}
              &lt;/div&gt;
              &lt;/div&gt;
  
  
             ......
  
            &lt;/Container&gt;
  
  
  
          ......
          );
        }
      }
  
  const mapStateToProps = (state) =&gt; {
    return {
      users: state.firestore.ordered.users,
      auth: state.firebase.auth,
      profile: state.firebase.profile
    }
  }
  
  ......
  
  </code></pre>