Как переписать функцию, чтобы linter не ругался?

Question

[nivaech]

Есть функция, которая генерирует классы стилей.
Она совмещает элементы двох массивов и выдает все возможные между ними комбинации.

const breakpoints = ['xs', 'sm', 'md'];
const sizes = [96, 136, 160];

  for (const breakpoint of breakpoints) {
    for (const size of sizes) {
      styles[`${breakpoint}${size}`] = {
        [theme.breakpoints[breakpoint === 'xs' ? 'down' : 'up'](breakpoint)]: { width: size, height: size },
      };
    }
  }

То есть на выходе получаются такие классы (используется material ui):

xs96: {
    [theme.breakpoints.up('md')]: {
      width: '136px',
      height: '136px',
    },
  },
  xs136: {
    [theme.breakpoints.up('md')]: {
      width: '136px',
      height: '136px',
    },
  },
  xs160: {
    [theme.breakpoints.up('md')]: {
      width: '160px',
      height: '160px',
    },
  },
...
...

Полная запись компонента выглядит так:

const breakpoints = ['xs', 'sm', 'md'];
const sizes = [96, 136, 160];

const useStyles = makeStyles(theme => {
  const styles = {
    container: {
      boxShadow: '0px 4px 8px rgba(60, 85, 165, 0.16)',
      borderRadius: '8px',
      overflow: 'hidden',
    },
  };

  for (const breakpoint of breakpoints) {
    for (const size of sizes) {
      styles[`${breakpoint}${size}`] = {
        [theme.breakpoints[breakpoint === 'xs' ? 'down' : 'up'](breakpoint)]: { width: size, height: size },
      };
    }
  }
  return styles;
});

const OrgLogo = ({ src, alt, xs = 96, sm = xs, md = sm }) => {
  const classes = useStyles();
  return (
    <div className={clsx(classes.container, classes[`xs${xs}`], classes[`sm${sm}`], classes[`md${md}`])}>
      <SquareImage src={src} alt={alt} />
    </div>
  );
};

Но линтер ругается на условия с for...of и не пропускает его. Как переписать условие так, чтобы оно прошло проверку?

Answer 1

[Lynatik001]

использовать obj.forEach или .map

const frontMenu = (...arrayOfLabel) => Telegraf.Extra.markdown().markup((m) => m.inlineKeyboard(
  arrayOfLabel.map((a) => a.map((b) => m.callbackButton(b.name, b.callback))),
));

вот у меня перебор двумерного массива. только думаю страдает читаемость используя map