0xD34F

В родительском компоненте храните индекс/id элемента, у которого поле комментария надо показывать. В зависимости от равенства этого свойства текущему индексу/id, устанавливайте значение параметра, который будет управлять отображением поля комментария. При клике на радиокнопку в дочернем компоненте отправляйте событие, по которому в родителе будет обновляться индекс/id активного элемента.

https://jsfiddle.net/xwhv9k3u/

pathname
  .match(/\/[^/]+/g)
  .map((n, i, a) => a.slice(0, i + 1).join(''))
  .map(n => ({
    title: routes.find(r => RegExp(`^${r.url.replace(/:[^\/]+/g, '[^\/]+')}$`).test(n))?.title ?? '',
    url: n,
  }))

<Placemark
  options={{
    iconLayout: 'default#image',
    iconImageHref: 'здесь путь к вашей картинке',
  }}
/>

https://codesandbox.io/s/polished-rgb-m430d?file=/...

const arr = Array.from(str.matchAll(/[^\/]+/g), n => n[0]);

// или

const arr = str.match(/[^\/]+/g) ?? [];

// или

const arr = str.split('/').filter(Boolean);

// или

const arr = Array.prototype.reduce.call(str, (acc, n, i) => (
  (n !== '/') && (
    acc[1] !== i - 1 && acc[0].push(''),
    acc[0][acc[0].length - 1] += n,
    acc[1] = i
  ),
  acc
), [ [], -Infinity ])[0];

<button data-step="-1">-</button>
<input value="1">
<button data-step="+1">+</button>

const values = [ 1, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48, 56, 64 ];

for (const n of document.querySelectorAll('[data-step]')) {
  n.addEventListener('click', onClick);
}

function onClick() {
  const input = document.querySelector('input');
  const index = +this.dataset.step + values.indexOf(+input.value);
  input.value = values[Math.max(0, Math.min(values.length - 1, index))];
}

Получаем элементы:

const elements = el.closest('.calc').querySelectorAll('.range__control');

// или

const { elements } = el.form;

Перемножаем их значения:

const price = Array.prototype.reduce.call(
  elements,
  (acc, n) => acc * n.value,
  1
);

// или

let price = 1;
for (const { value } of elements) {
  price *= value;
}

// или

let price = 1;
for (let i = 0; i < elements.length; i++) {
  price = price * elements.item(i).value;
}

// или

const price = (function mul(i, n = elements[i]) {
  return n ? n.value * mul(-~i) : 1;
})(0);

// или

const price = eval(Array.from(elements, n => n.value).join('*')) ?? 1;

После того, как назначили обработчик, просто сгенерируйте соответствующее событие. В данном случае, это будет вызов метода change без параметров:

$('select').change(function() { ... }).change();

explode/preg_split + array_slice + implode

Object.values(arr.reduce((acc, { id, value }) => {
  const type = typeof value;
  acc[id] = acc[id] ?? { id };
  acc[id][type] = (acc[id][type] ?? 0) + 1;
  return acc;
}, {}))

Добавьте $(this).remove() в конец обработчика клика.

str.match(/[^.]+(?=\.[^.]+(\/|$))/)[0]

Заворачиваете div с числом в отдельный экземпляр Spring, которому задаёте в качестве key само число:

<Spring
  key={this.state.number}
  from={{ opacity: 0, marginTop: 50 }}
  to={{ opacity: 1, marginTop: 0 }}
>
  {({ opacity, marginTop }) => (
    <div style={{ opacity, marginTop }}>{this.state.number}</div>
  )}
</Spring>

(?<!\{)\{(\w+)\}(?!\})

this.deleteItem = this.addItem.bind(this)

Так add или delete? Вы уж определитесь.

А ещё лучше - используйте при объявлении методов синтаксис стрелочных функций, и тогда вручную привязывать контекст будет не надо:

class App extends React.Component {
  addItem = e => {
    ...
  }

  deleteItem = key => {
    ...
  }
  ...

Пусть второй параметр будет массивом индексов, по умолчанию - пустой (соответственно, когда вызываете функцию сами, его передавать не надо). В начале обработки элемента данных кладёте его индекс в массив, после обработки убираете. Ну а текст - собираете из массива какой вам нужен:

const createTreeElement = (data, index = []) =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n, i) => (
        index.push(i),
        ul.append(document.createElement('li')),
        ul.lastChild.append(index.join('_'), createTreeElement(n.children, index)),
        index.pop(),
        ul
      ), document.createElement('ul'))
    : '';

document.body.append(createTreeElement(data));

Или, делаем второй параметр строкой. Как и массив из предыдущего варианта, по умолчанию пуста, указывать при самостоятельном вызове не надо. При обработке элемента массива собираем новую строку, состоящую из переданной в функцию и индекса:

const createTreeHTML = (data, index = '') =>
  data instanceof Array && data.length
    ? `<ul>${data.map((n, i) => `
         <li>
           ${(i = index + (index && '_') + i)}
           ${createTreeHTML(n.children, i)}
         </li>`).join('')}
       </ul>`
    : '';

document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

const result = [];
for (const n of arrWithObj) {
  if (!arr.includes(n.id)) {
    result.push(n);
  }
}

или

const result = [];

COLLECT_OBJECTS:
for (let i = 0; i < arrWithObj.length; i++) {
  for (let j = 0; j < arr.length; j++) {
    if (arr[j] === arrWithObj[i].id) {
      continue COLLECT_OBJECTS;
    }
  }
  result[result.length] = arrWithObj[i];
}

или

const result = arrWithObj.filter(function(n) {
  return !this.has(n.id);
}, new Set(arr));

или

const result = (function get(i, n = arrWithObj[i]) {
  return n
    ? [].concat(~arr.indexOf(n.id) ? [] : n, get(-~i))
    : [];
})(0);

или

const result = [...arr.reduce(
  (acc, n) => (acc.delete(n), acc),
  new Map(arrWithObj.map(n => [ n.id, n ]))
).values()];

Да-да, документация для лохов, зачем её читать?

strict mode

const ul = document.querySelector('.ul-parent');

const groupedNodes = Array.prototype.reduce.call(
  ul.children,
  (acc, n) => {
    const k = n.textContent[0].toLowerCase();
    (acc[k] = acc[k] ?? []).push(n);
    return acc;
  },
  {}
);

ul.replaceWith(...Object.entries(groupedNodes).map(n => {
  const ul = document.createElement('ul');
  ul.classList.add('ul-parent', n[0] + '-litter');
  ul.append(...n[1]);
  return ul;
}));

или

const ul = document.querySelector('.ul-parent');

const groupedHTML = Array
  .from(ul.querySelectorAll(':scope > li'))
  .reduce((acc, { innerText: [ c ], outerHTML }) => {
    const k = c.toLowerCase();
    (acc[k] = acc[k] ?? []).push(outerHTML);
    return acc;
  }, {});

ul.outerHTML = Object
  .entries(groupedHTML)
  .map(([ k, v ]) => `<ul class="ul-parent ${k}-litter">${v.join('')}</ul>`)
  .join('');

document.addEventListener('click', e => {
  const div = e.target.closest('button')?.closest('div');
  if (div) {
    console.log(div.id);
  }
});

или

document.querySelectorAll('div button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(e.currentTarget.closest('div').id));