fillpower

const a = [[8, 12], [17, 22]];
const b = [[5, 11], [14, 18], [20, 23]];

const result = a.reduce((acc, rangeA) => {
  
  return b.reduce((list, rangeB) => {

    if (rangeA[0] >= rangeB[1] || rangeA[1] <= rangeB[0]) {
      return list;
    }

    const from = Math.max(rangeA[0], rangeB[0]);
    const to = Math.min(rangeA[1], rangeB[1]);

    return [...list, [from, to]];
  }, acc);

}, []);

Я немного переписал код и проблема решилась:

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

попробуй добавить

.icon {
    margin-bottom: auto;
}

на этих двух примерах работает

Если используешь метод внутри класса - то не нужно.

class Div extends Component {
  constructor(props) {
    super(props);
    this.props=props;
  }

  showAlert(value) {
      alert(value);
  }

  render() {
      this.showAlert(1);
    return (
      <div>

      </div>
    );
  }
}

Все будет норм.
Но если ты будешь передавать какой-то метод в обработчик или в дочерний компонент, то произойдет следующее:
this - текущий контекст - класс в котором объявлен.
Далее button (это хоть и простой jsx, но все же компонент) - внутри себя вызывает this.имяМетода - this уже сменился.
Вот пример:

class Div extends Component {
  constructor(props) {
    super(props);
    this.props=props;
  }

  showEvent(e) {
      alert(e);
  }

  render() {
      this.showAlert(1);
    return (
      <div>
          <button onClick={this.showEvent}></button>
      </div>
    );
  }
}

this - определяется в момент вызова.
Чтобы все было ок, есть следующие пути привязки контекста:
1)var self = this - сохранение в переменную.
2)apply - вызов метода с явной передачей контекста.
3)bind(some) - привязка контекста. Говорит функции что использовать в качестве контекста, потом изменить контекст нельзя.
4)()=>{} - стрелочная функция, которая в отличие от function(){} - определяет контекст не в момент вызова, а в момент объявления.

Используется фиксированный контекст и метод вызывается используя то что нужно, а не пытается вызваться от другого объекта.

Внутри функции может потеряться контекст в зависимости от того, как она вызвана.

// вызов
obj.foo();
// и вызов
const bar =  obj.foo;
bar();
// оба вызывают foo, но во втором случае this внутри foo будет привязан не к obj, 
// а к глобальному объекту

Таким образом, если мы хотим передать функцию куда-то с определенным контекстом, нам ее надо привязывать. Второй момент, что класс это просто синтаксический сахар, а на самом деле это просто функция, к которой this не привязывается. Таким образом, внутри класса, метод не будет понимать куда вы обращаетесь без привязки.

(true && false) - false, при логическом "и" вернется true, если оба операнда true
(true || false) - true, логическое "или" возвращает true, если хотя бы один операнд true
true && Boolean(0) - false, Boolean(0) вернет false, т.к. в качестве параметра передан 0.
!'String' || false - false, непустая строка при приведении к boolean равна true, !true === false