0xD34F

Вместо логического значения пусть будет идентификатор окна, которое надо открыть:

<button onClick={() => setModal('раз окно')}>1</button>
<button onClick={() => setModal('два окно')}>2</button>
<button onClick={() => setModal('три окно')}>3</button>
...
<Modal display={modal === 'раз окно'}>...</Modal>
<Modal display={modal === 'два окно'}>...</Modal>
<Modal display={modal === 'три окно'}>...</Modal>

Понятно, что читать спецификацию (+, parseInt) вы вряд ли будете, раз не смогли отличия хотя бы погуглить, так что вот вам несколько примеров разницы, а дальше думайте сами, где что использовать:

parseInt('1!!!') // 1
+'1!!!' // NaN


parseInt('') // NaN
+'' // 0


parseInt('3.14159') // 3
+'3.14159' // 3.14159


parseInt('0b1000101') // 0
+'0b1000101' // 69


parseInt('0o273') // 0
+'0o273' // 187


parseInt({ valueOf: () => 666 }) // NaN
+({ valueOf: () => 666 }) // 666


parseInt('1000000000', 2) // 512
+'1000000000' // 1000000000


parseInt('99', 8) // NaN
+'99' // 99


parseInt('DEAD', 16) // 57005
+'DEAD' // NaN

function update(target, source, key, props) {
  source.forEach(function(n) {
    const item = this[n[key]];
    item && props.forEach(m => item[m] = n[m]);
  }, Object.fromEntries(target.map(n => [ n[key], n ])));
}


update(directions, [ { раз объект }, { два объект }, ... ], 'id', [ 'color' ]);

Обернуть tr, который должен присутствовать всегда и tr, который должен присутствовать в зависимости от условия в общий template:

<tbody>
  <template v-for="item in data">
    <tr>...</tr>
    <tr v-if="...">...</tr>
  </template>
</tbody>

re.sub(r'\{color.*?\}', '', text)

re.findall(r'\d+\.\d{2}(?!\d)', text)

То, что возвращает рекурсивный вызов, тоже в результирующий массив надо засовывать.

/\.(?=.*@)/g

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

Документация.

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

Значит, рано за react взялись. Это ОЧЕНЬ простая вещь - конечно, для тех, кто готов её осваивать.

фразы оттуда навроде "Подъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов." лишь отпугивают новичков вроде меня

Вот это хорошо. Новичкам react ни к чему.

C javascript знаком на базовом уровне

Этого мало.

Чтобы выполнялись привязки обработчиков событий, атрибутов и т.д., вместо засовывания строки в v-html надо её компилировать как шаблон компонента, как-то так:

<component :is="getComponent(text)"></component>

methods: {
  getComponent(text) {
    return Object.assign(Vue.compile(`<div>${this.getMessageHtml(text)}</div>`), {
      methods: {
        // сюда пробрасываете нужный вам обработчик клика
      },
    });
  },
  ...

Хотя, в данном случае, это делать не обязательно, можно воспользоваться делегированием - вместо кнопок вешайте обработчик клика куда-нибудь повыше, например:

<div v-html="getMessageHtml(text)" @click="onClick"></div>

methods: {
  onClick(e) {
    if (e.target.tagName === 'BUTTON') {
      // убедились, что клик был по кнопке - теперь делайте чего там вам надо
    }
  },
  ...

document.addEventListener('click', e => {
  const btn = e.target.closest('.more-btn');
  for (const n of document.querySelectorAll('.more-btn')) {
    n.classList.toggle('active', n === btn && !n.classList.contains('active'));
  }

  // или

  document.querySelectorAll('.more-btn').forEach(function(n) {
    n.classList[n === this ? 'toggle' : 'remove']('active');
  }, e.target.closest('.more-btn'));
});

li:first-child:hover ~ li:last-child {
  display: none;
}

Если нам нужно прокинуть данные от родителя к ребенку на сколь угодно глубокий уровень, мы можем воспользоваться provide/inject, а если нам надо в обратную сторону?

Точно так же. "Прокидывайте" с помощью provide метод компонента - "в обратную сторону" сведётся к его вызову.

function weightedRandom(arr, key = () => 1) {
  const val = key instanceof Function ? key : n => n[key];
  const max = arr.reduce((acc, n) => acc + val(n), 0);

  return () => {
    let rand = Math.random() * max;
    return arr.find(n => (rand -= val(n)) < 0);
  };
}


const getRandomPhotosArray = weightedRandom([
  [ 9,  truePhotos ],
  [ 1, funnyPhotos ],
], 0);

function getPhoto() {
  const photos = getRandomPhotosArray()[1];
  return photos[Math.random() * photos.length | 0];
}

Свойства formatter в настройках tooltip'ов:

new ApexCharts(..., {
  ...
  tooltip: {
    ...
    y: {
      title: {
        formatter: (seriesName, seriesData) => ...,
      },
      formatter: (value, seriesData) => ...,
    },
  },
});

Например.

from collections import Counter

count = Counter(a)
count.subtract(Counter(b))

result = sum(([ k ] * v for k, v in count.items()), [])

.page-message__text {
  white-space: pre;
}

Или, заменяете \n на <br>, а {{ }} на v-html.

<div class="tab" @click="$router.push('/')">

Заменить эту ерунду на router-link. Там добавление класса уже реализовано, осталось только стили ему прописать.

const getNestedData = arr =>
  Array.isArray(arr)
    ? arr.flatMap(n => [ n, ...getNestedData(n.children) ])
    : [];

// или

function* getNestedData(arr) {
  if (arr instanceof Array) {
    for (const n of arr) {
      yield n;
      yield* getNestedData(n.children);
    }
  }
}

// или

const getNestedData = function*(arr) {
  for (const stack = this(arr); stack.length;) {
    const n = stack.pop();
    yield n;
    stack.push(...this(n.children));
  }
}.bind(x => x?.constructor === Array ? [...x].reverse() : []);

for (const n of getNestedData(DATA)) {
  console.log(n);
}