title: I have a react table im trying to get it to sort when I click on the this different table Heads
body: <p>I would assume the issue is coming from signaling portion of the code and the format I have set it in but from all accounts, this should work I know I can break it into an if-else statement but this is the absolute first thing I have created in React and I am trying to use this format. I provided the whole code for the table but the rest is working properly it's just the sorting I am trying to get to work any tips or suggestions would be greatly appreciated. Also if there is anything else in the code you see that I could improve upon as well am open to all suggestions to learn and improve, my search filter is having issues as well but I'm hoping to resolve that.</p>
  <pre><code>enter class AppTable extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {
          users: [],
         sorted: '',
          directory: 'asc',
          compile: [],
      };
  }
      componentDidMount() {
          axios.get(`https://randomuser.me/api/?results=20&amp;nat=us`)
              .then(res =&gt; {
                  let users = (res &amp;&amp; res.data) ? res.data.results: [];
                if (!users || users.length === 0){
                      this.setState({loading: false});
                      return;
                  }
                  const tableList = users.map(state =&gt; new User(state));
                  this.setState({ compile: tableList, users: tableList });
              })
      }
  
      sorting(sorted) {
          const currentField = this.state.sorted;
          const users = this.state.users;
          let directory = this.state.directory;
          if (currentField === sorted) {
              directory = directory === 'asc' ? 'desc' : 'asc'
             }else{
              directory = 'asc'
             }
          this.signaling(users, sorted,directory);
          this.setState({users: users, directory: directory, sorted: sorted})
      }
  
      **signaling(objects, field, direction){
          const signal = direction === &quot;asc&quot; ? 1 : -1
          objects.sort((a,b) =&gt; (a[field] &gt; b[field]) ? signal * 1 : ((b[field] &gt; a[field]) ? signal * -1 : 0));
      }**
  
      initSearch(evt) {
          const searchValue = evt.target.value;
          const compile = this.state.compile;
          if (!searchValue){
              this.setState({users: compile});
              return;
          }
          const filtering = compile.filter((object)=&gt;{
              return Object.keys(object).reduce((acc, curr)=&gt;{
                  return acc || object[curr].toLowerCase().includes(searchValue);
              }, false);
          });
          this.setState({users: filtering});
      }
  
      render() {
          const throughput = this.state.users;
          return &lt;Col&gt;
              &lt;Form inline className=&quot;mb-2&quot;&gt;
                      &lt;Form.Label className=&quot;my-1 mr-2&quot;&gt;Search:&lt;/Form.Label&gt;
                      &lt;Form.Control type=&quot;text&quot; onChange={event =&gt; this.initSearch(event)} placeholder=&quot;Search Table&quot; /&gt;
              &lt;/Form&gt;
              &lt;Table striped bordered hover&gt;
                  &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th className=&quot;pointer&quot; onClick={() =&gt; this.sorting(`${this.firstName}`)}&gt;First Name&lt;/th&gt;
                      &lt;th className=&quot;pointer&quot; onClick={() =&gt; this.sorting(`${this.lastName}`)}&gt;Last Name&lt;/th&gt;
                      &lt;th className=&quot;pointer&quot; onClick={() =&gt; this.sorting(`${this.email}`)}&gt;Email&lt;/th&gt;
                      &lt;th className=&quot;pointer&quot; onClick={() =&gt; this.sorting(`${this.street}`)}&gt;Street&lt;/th&gt;
                      &lt;th className=&quot;pointer&quot; onClick={() =&gt; this.sorting(`${this.city}`)}&gt;City&lt;/th&gt;
                      &lt;th className=&quot;pointer&quot; onClick={() =&gt; this.sorting(`${this.state}`)}&gt;State&lt;/th&gt;
                      &lt;th className=&quot;pointer&quot; onClick={() =&gt; this.sorting(`${this.phone}`)}&gt;Phone&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  {throughput.map((individual, index) =&gt; (
                      &lt;AppRow key={index} user={individual}/&gt;
                  ))}
                  &lt;/tbody&gt;
              &lt;/Table&gt;
          &lt;/Col&gt;;
      }
  }
  
  export default AppTable;
  </code></pre>