How to map/loop 2 array values to anchor tag with href and text?

You can use .map()and pass a function with 2 parameters, the map function can have up to 3 parameters .map((element, [index], [array]) => ...), the index and array are optional, the index can be used to access the elements of the second array

Here's a cut-out code that should work for you (adjusted to edited answer):

...

{
  links.map((elem, index) => (
    <a href={elem} className={classnames[index]}>{tabnames[index]}</a>
  ))
}

...

If possible, I recommend combining all arrays into an array of objects, since all elements with the same index are used together, it makes sense to combine them, which would look like this:

const links = [{
    href: '#all',
    tabName: 'All',
    className: 'One'
  },{
    href: '#aew',
    tabName: 'AEW',
    className: 'Two'
  },{
    href: '#roh',
    tabName: 'ROH',
    className: 'Three'
  },{
    href: '#impact',
    tabName: 'Impact',
    className: 'Four'
}];

...

{
  links.map((el) => (
    <a href={el.href} className={el.className}>{el.tabName}</a>
  ))
}

...