I have this component in angular. I am trying to make it work for react. I have changed most of the directives present in the original angular code but got stuck with ng-class. I know I can use the 'classnames' npm package to achieve the exact thing. But my project doesn't allow to install any third party package. I have done some research that I can also use classList from plain js to achieve it but, I am confused in how to implement it.

import React from 'react';

export default function commentNest(props) {
 return (
  <>
   <div className="su__row su__mx-sm-0 su__pt-sm-0  su__no-gutters">
    <div className="su__w-100 su__px-sm-0">
     <div className="su__tabing su__bg-white su__radius-1" ng-class="{su__loading: loadingResults}">
      <div className="NavBar">
       {props.clientFilters.sort((a, b) => {return a.index - b.index}).map(function (filter) {
        <div className="navbar-filter" style={{ display: clientFilters[0] && filter.values.length !== 0 ? 'block' : 'none' }}>
         <div style={{ display: filter.key == '_index' ? 'block' : 'none' }} className="su-tabsSection su__loading-view su__w-100 su__border-b su__text-nowrap" style={{overflowX: 'auto'}}>
          <div ng-class="{'active-type': activeType === 'all' && !users && !privateMessage }" className="inactive-type su__font-regular font-14 tabs su__cursor su__text-nowrap" onClick={() => callElasticFilterChange(true,'_index', 'all', 0, 0)}>
           {{languageDs['All Content']}}
          </div>
          {
           props.filter.values.map(function (filterType) {
            <div ng-class="{'active-type': activeType == filterType.Contentname && !users && !privateMessage}" className="inactive-type su__font-regular font-14 su__cursor su__text-nowrap tabs" onClick={() => callElasticFilterChange(filterType.selected,filter.key, filterType.Contentname, filter.order, $index)}>
             {{filterType.displayName === 'Sources' ? languageDs['Sources'] : filterType.displayName }}
            </div>
          })}       
          <div onClick={() => getUsers('Best Match','score')} ng-class="{'active-type': users}" className="inactive-type su__font-regular font-14 su__cursor su__text-nowrap tabs">
           {{languageDs['USERS']}}
          </div>
         </div>
        </div>
       })}
      </div>
     </div>
    </div>
   </div>
  </>
 );
};