MinCategories.js

import React, { useState } from 'react';

import classNames from 'classnames';

import styles from './min.less';

const Categories = props => {
  const [currentIndex, setCurrentIndex] = useState(props.currentMenuIndex);
  const selectCategories = (event, index) => {
    event.preventDefault();
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    setCurrentIndex(index);
    // eslint-disable-next-line no-unused-expressions
    props.onChange && props.onChange(index);
  };
  return (
    <div
      className={classNames(styles['menu-categories'], {
        [styles['min-cateorites']]: props.mode,
      })}
    >
      {(props.data || [])
        .filter(item => !item.hideInMenu)
        .map((item, index) => {
          const categorieCls = classNames(
            styles['categorie-name'],
            styles.btn,
            currentIndex === index ? styles.active : '',
          );
          return (
            <div className={categorieCls} key={item.name} onClick={event => selectCategories(event, index)}>
              {/* eslint-disable-next-line jsx-a11y/alt-text */}
              <img src={item.extData.icon} />
              <span>{item.extData.label}</span>
            </div>
          );
        })}
    </div>
  );
};

export default Categories;