title: ReactJS: onClick() sorting for dynamically rendered <th> elements
body: <p>I am printing the data fetched from an API into a table, and I am facing some difficulties to sort the column values, alphabetically and numerically. If the columns data within the API consists of numerical values, i.e. <strong><code>10.01, 333.01, 8.99 or 100.88</code></strong>, etc. to sort it ascending from <strong><code>0 -&gt; 100</code></strong> on first click and on the second click descending <strong><code>100 -&gt; 0</code></strong> and in the same logic for alphabetically values, i.e <strong><code>a-z &amp;&amp; Z-A</code></strong> and reverse versa. </p>
  
  <p>The function that I am familiar with <strong><code>onclick="sortTable(0)"</code></strong>, doesn't function in the same way in React, as I used to code it in javaScript. Probably I am misleading the ES6 standard, but I am not sure. </p>
  
  <p><a href="https://i.stack.imgur.com/zAN1z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zAN1z.jpg" alt="Here is how it&#39;s look like my table without sorting functionality."></a></p>
  
  <p>Here is my code sample with <strong><code>onclick="sortTable(0)"</code></strong>, but it's doesn't function well:</p>
  
  <pre><code>class App extends React.Component
  {
      constructor()
      {
          super();
          this.state = {
              rows: [],
              columns: [],
              clicked: false
          }
  
          this.handleClick = this.handleClick.bind( this );
      }
  
      handleClick()
      {
          this.setState( {
              clicked: true
          } );
      }
  
  
       sortTable( n )
  {
              var table, columns, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
              table = document.getElementById( "datagrid" );
              switching = true;
              //Set the sorting direction to ascending:
              dir = "asc";
              /*Make a loop that will continue until
              no switching has been done:*/
              while ( switching )
              {
                  //start by saying: no switching is done:
                  switching = false;
                  columns = table.getElementsByTagName( "TH" );
                  /*Loop through all table rows (except the
                  first, which contains table headers):*/
                  for ( i = 1; i &lt; ( columns.length - 1 ); i++ )
                  {
                      //start by saying there should be no switching:
                      shouldSwitch = false;
                      /*Get the two elements you want to compare,
                      one from current row and one from the next:*/
                      x = columns[i].getElementsByTagName( "TH" )[n];
                      y = columns[i + 1].getElementsByTagName( "TH" )[n];
                      /*check if the two rows should switch place,
                      based on the direction, asc or desc:*/
                      if ( dir == "asc" )
                      {
                          if ( x.innerHTML.toLowerCase() &gt; y.innerHTML.toLowerCase() )
                          {
                              //if so, mark as a switch and break the loop:
                              shouldSwitch = true;
                              break;
                          }
                      } else if ( dir == "desc" )
                      {
                          if ( x.innerHTML.toLowerCase() &lt; y.innerHTML.toLowerCase() )
                          {
                              //if so, mark as a switch and break the loop:
                              shouldSwitch = true;
                              break;
                          }
                      }
                  }
                  if ( shouldSwitch )
                  {
                      /*If a switch has been marked, make the switch
                      and mark that a switch has been done:*/
                      rows[i].parentNode.insertBefore( rows[i + 1], rows[i] );
                      switching = true;
                      //Each time a switch is done, increase this count by 1:
                      switchcount++;
                  } else
                  {
                      /*If no switching has been done AND the direction is "asc",
                      set the direction to "desc" and run the while loop again.*/
                      if ( switchcount == 0 &amp;&amp; dir == "asc" )
                      {
                          dir = "desc";
                          switching = true;
                      }
                  }
              }
          }
  
      componentDidMount()
      {
  
          fetch( "http://ickata.net/sag/api/staff/bonuses/" )
              .then( function ( response )
              {
                  return response.json();
              } )
              .then( data =&gt;
              {
                  this.setState( { rows: data.rows, columns: data.columns } );
              } );
  
      }
  
      render()
      {
  
          return (
              &lt;div id="container" className="container"&gt;
                  &lt;h1&gt;Final Table with React JS&lt;/h1&gt;
                  &lt;table className="datagrid"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt; {
                              this.state.columns.map(( column, index ) =&gt;
                              {
                                  return ( &lt;th onClick={this.handleClick}&gt;{column}&lt;/th&gt; )
                              }
                              )
                          }
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt; {
                          this.state.rows.map( row =&gt; (
                              &lt;tr&gt;{row.map( cell =&gt; (
                                  &lt;td&gt;{typeof cell === 'number' ? cell.toFixed( 2 ) : cell}&lt;/td&gt;
                              ) )}
                              &lt;/tr&gt;
                          ) )
                      }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  ReactDOM.render( &lt;div id="container"&gt;&lt;App /&gt;&lt;/div&gt;, document.querySelector( 'body' ) );
  </code></pre>
  
  <p>You are welcome to contribute directly to my Repo: <a href="https://github.com/andimit/fetching-react-api" rel="nofollow noreferrer">Fetching API data into a table</a></p>
  
  <p>My example, right after the <strong><code>onclick="sortTable(0)"</code></strong> has been used, doesn't htow any errors in the console, but it prints the same result. I guess I am not handling correct the <strong><code>&lt;th onClick={this.handleClick}&gt;{column}&lt;/th&gt;</code></strong> elements. </p>
  
  <p><a href="https://i.stack.imgur.com/VBICs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VBICs.jpg" alt="onClick event doesn&#39;t dunction"></a></p>
  
  <p>Unfortunately I was not able to find related documentation at <a href="https://reactjs.org/" rel="nofollow noreferrer">ReactJs.org</a> </p>
  
  <p>It's doesn't function the onClick event at all, so that I can't debug the sor functionality either.</p>
  
  <p>Any suggestions will be appreciated! </p>