How to rewrite a function so that linter does not swear?

Question

JavaScript

There is a function that generates style classes.
It combines the elements of two arrays and returns all possible combinations between them.

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 },
      };
    }
  }

That is, the following classes are obtained at the output (material ui is used):

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',
    },
  },
...
...

The complete component entry looks like this:

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>
  );
};

But the linter swears at conditions with for...of and doesn't skip it. How to rewrite the condition so that it passes the test?

Answer 1

use obj.forEach or .map

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

Here I have a two-dimensional array. only I think readability suffers using map