title: Trying to sort my challenges alphabetically based on title/description with buttons
body: <p>Trying to sort my challenges alphabetically based on title/description with buttons. No error in the console so don't really know where to look. Could someone have a look at my code below and explain where the issue is?</p>
  
  <pre><code>    class Allchallenges extends React.Component {
          constructor() {
              super()
          this.state = {
             challenges: []
          }
  
          this.onDelete=this.onDelete.bind(this)
          this.sortByTitle=this.sortByTitle.bind(this)
          this.sortByDescription=this.sortByDescription.bind(this)
      }
  
      componentDidMount(){
          axios({
              method: "GET",
              url: `${process.env.REACT_APP_API_BASE}/allchallenges`,
              withCredentials: true
          })
          .then(response =&gt; {
              console.log(response)
              let challengeslist = response.data;
              this.setState({challenges: challengeslist})
          })
          .catch(error =&gt; {
              console.log("You've made an error charles: ",error)
          })
      }
  
      onDelete(challengeId){
          axios
          .delete(`${process.env.REACT_APP_API_BASE}/allchallenges/${challengeId}`)
          .then(response =&gt; {
              const challenges = this.state.challenges.filter(challenge =&gt; challenge._id !== challengeId)
              this.setState({challenges})
          })
          .catch(err =&gt; console.log(err))
      }
  
      sortByTitle() {
          let challengesSortTitle = this.state.challenges.sort((a,b) =&gt; {
              return a.title - b.title
          })
          this.setState({
              challenges:challengesSortTitle
              // challengesSortTitle
          })
      }
  
      sortByDescription() {
          let challengesSortDescription = this.state.challenges.sort((a,b) =&gt; {
              return a.description - b.description
          })
          this.setState({
              challenges:challengesSortDescription
              // challengesSortDescription
          })
      }
  
      render() {
          return (
              &lt;DefaultLayout&gt;
                  &lt;div className="challengeoverviewlist"&gt;
                      &lt;h1&gt;All challenges&lt;/h1&gt;   
  
                      &lt;div className="sortingbuttons"&gt;
                          &lt;button onClick={this.sortByTitle} className="sorttitle"&gt;
                              Sort based on TITLE
                          &lt;/button&gt;
  
                          &lt;button onClick={this.sortByDescription} className="sortdescription"&gt;
                              Sort based on DESCRIPTION
                          &lt;/button&gt;
  
                      &lt;/div&gt;
  
                      &lt;div className="challengeboxes"&gt;
                          {    
                          this.state.challenges.map(challenge =&gt; 
                              (
  
                                  &lt;div className="totalbox" key={challenge._id}&gt;
  
                                      &lt;Challengebox 
                                          key={challenge._id} 
                                          id={challenge._id} 
                                          title={challenge.title} 
                                          description={challenge.description}
                                      /&gt;
  
                                      &lt;button className="deletebutton" onClick={() =&gt; this.onDelete(challenge._id)}&gt;
                                          Delete
                                      &lt;/button&gt;
  
                                  &lt;/div&gt;
                              ))                                                                      
                          }
                      &lt;/div&gt;
  
                  &lt;/div&gt;    
              &lt;/DefaultLayout&gt;
          )
      }
  }
  
  export default Allchallenges
  </code></pre>