0xD34F

{this.state.ad.map(n => (
  <div key={n.id}>
    <h2>{n.title}</h2>
    <div>{n.images.map(src => <img src={src} />)}</div>
  </div>
))}

function group(data, key, val = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const getVal = val instanceof Function ? val : n => n[val];
  const result = {};

  for (const n of data) {
    const k = getKey(n);
    (result[k] = result[k] || []).push(getVal(n));
  }

  return result;
}

group(arr, 'room')
// или
group(arr, n => n.room)

group(Array(5).keys(), n => n % 2 ? 'нечётные' : 'чётные')

group('a8-C!39', n => (
  n.toLowerCase() !== n.toUpperCase() ? 'буква' :
  !Number.isNaN(+n)                   ? 'цифра' :
                                        'другое'
))

<input name="xxx" value="69">
<input name="xxx" value="187">
<input name="xxx" value="666">
<input name="yyy" value="-1">

group(document.querySelectorAll('input'), 'name', n => +n.value)

$(this).closest('tr').prevAll('tr:has(.name-pnd)').first()

const containers = document.querySelectorAll('.counts');
const tag = 'div';
const className = 'count';
const count = 3;

const html = [...Array(count)]
  .map((_, i) => `<${tag} class="${className}">${i + 1}</${tag}>`)
  .join('');

for (const n of containers) {
  n.insertAdjacentHTML('beforeend', html);
}

for (let i = 0; i < containers.length; i++) {
  for (let j = 0; j < count;) {
    const el = document.createElement(tag);
    el.classList.add(className);
    el.innerText = ++j;
    containers[i].appendChild(el);
  }
}

const fragment = document.createDocumentFragment();
fragment.append(...Array.from({ length: count }, (_, i) => (
  Object.assign(document.createElement(tag), {
    textContent: -~i,
    className,
  })
)));

containers.forEach(n => n.append(fragment.cloneNode(true)));

<component
  v-for="n in flyingButtons"
  :is="n.tag"
  :class="n.class"
>
  {{ n.title }}
</component>

const getFirst = (...selectors) => selectors.reduce((acc, n) => acc.add($(n)[0]), $());

const $first = getFirst('div', 'span');

const siblings = Array.prototype.filter.call(
  this.parentNode.children,
  n => n !== this
);

const siblings = [];
for (let el = this; (el = el.previousElementSibling); siblings.unshift(el)) ;
for (let el = this; (el = el.nextElementSibling); siblings.push(el)) ;

$('.openFormPopup').click(e => $('#btn-clicked').val(e.target.dataset.title));

const asyncForEach = (data, callback) =>
  Array.prototype.reduce.call(
    data,
    (promise, n, i, a) => promise.then(() => callback(n, i, a)),
    Promise.resolve()
  ).then(() => {});

// или

async function asyncForEach(data, callback) {
  for (const [ i, n ] of data.entries()) {
    await callback(n, i, data);
  }
}

asyncForEach(
  document.querySelectorAll('li'),
  li => new Promise(r => setTimeout(() => r(console.log(li.textContent)), 1000))
);

Здесь только регуляркой или как?

function incrementNumberInString(str) {
  for (let i = 0, iNum = -1; i < str.length; i++) {
    if ('0123456789'.includes(str[i])) {
      if (iNum === -1 && str[i - 1] === '[') {
        iNum = i;           
      }
    } else if (iNum !== -1 && str[i] === ']') {
      return str.slice(0, iNum) + (Number(str.slice(iNum, i)) + 1) + str.slice(i);
    } else {
      iNum = -1;
    }
  }

  return str;
}

str.replace(/(?<=\[)\d+(?=\])/, m => ++m)
// или
str.replace(/\[\d+\]/, m => '[' + (m.slice(1, -1) - -1) + ']')
// или
str.replace(/\[(\d+)\]/, (m, g1) => `[${-~g1}]`)

как лучше реализовать функционал, чтобы иконка была одна, а в нужных компонентах мы докидывали цвет?

выводит побуквенно