title: How to write plain javascript in React js 16? or how we can use document.getElementByClassName in React?
body: <p>Recently I started working on React js16 with Typescript. Moving from angular to react.
  I am trying to create my own sortable table. Here i am using native JS like code. 
  And I am not sure wether I am doing right or wrong. Cause in angular we were not using 
  native js. In react we can use ref but as per facebook it is having some issues. Another
  approach like ReactDOM.findNode which is also deprecated i think. So what would be the best 
  approach to do it or whatever I am doing that is fine? I am struggling to find the best approach to do it.</p>
  
  <p><strong>Please see the code written inside showDelete() function. The way i am adding the className and 
  replacing the class name those are correct or any other approach recommended? 
  Sorting logic is not there cause I will do server side sorting.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class CoursePage extends React.Component&lt;CoursePageProps, any&gt; {
      constructor(props: CoursePageProps) {
          super(props);
          this.showDelete = this.showDelete.bind(this);
      }
      showDelete(event: any) {
          let d = document.querySelectorAll('.customTable th');
          let c = document.getElementsByClassName('sortArrow') as HTMLCollectionOf&lt;HTMLElement&gt;;
          for (let i = 0; i &lt; c.length; i++) {
              c[i].style.display = 'none';
          }
          for (let i = 0; i &lt; d.length; i++) {
              d[i].className = d[i].className.replace(' active', '');
          }
          event.currentTarget.className += ' active';
          event.currentTarget.childNodes[1].className += ' fa fa-long-arrow-down';
          event.currentTarget.childNodes[1].style.display = 'inline';
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;Custom courses={this.props.courses} showDelete={this.showDelete}/&gt;
              &lt;/div&gt;
          );
      }
  }
  function mapStateToProps(state: any) {
      return {
          courses: state.courses,
      };
  }export default connect(mapStateToProps)(CoursePage);</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class Custom extends React.Component&lt;buttonProps, any&gt; {
      render() {
          const {showDelete, courses} = this.props;
          return (
              &lt;div&gt;
                  &lt;table className="table customTable"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th onClick={(e) =&gt; showDelete(e)}&gt;Id&lt;i className="sortArrow"/&gt;&lt;/th&gt;
                      &lt;th onClick={(e) =&gt; showDelete(e)}&gt;Name&lt;i className="sortArrow"/&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  ...
              &lt;/tbody&gt;
          &lt;/table&gt;
              &lt;/div&gt;
          );
        }
  }</code></pre>
  </div>
  </div>
  </p>