0xD34F

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

Сортируем существующий массив:

arr.sort((a, b) => (a.rooms - b.rooms) || (a.square - b.square));

// или, в более общем виде

const sort = (arr, ...keys) =>
  arr.sort((a, b) => {
    let diff = 0;
    keys.find(k => diff = a[k] - b[k]);
    return diff;
  });

sort(arr, 'rooms', 'square');

Создаём отсортированный новый:

const sorted = (arr, keys) => arr
  .map(n => [ n ].concat(keys(n)))
  .sort((a, b) => {
    let diff = 0;
    for (let i = 0; ++i < a.length && !(diff = a[i] - b[i]);) ;
    return diff;
  })
  .map(n => n[0]);

const sortedArr = sorted(arr, n => [ n.rooms, n.square ]);

for i, (k, v) in enumerate(sorted(top_list.items(), key=lambda n: n[1], reverse=True), 1):
  print(f'{i}) {k} - {v}')

list1 = [ n for n in list1 if n in list2 ]

template.replace(/\{(.+?)\}/g, (m, g1) => user[g1] ?? m)

(?<=\.).+?(?=\?)

{this.state.card.map(id => (
  <Link to={`/api/events/${id}`}>
    <Main number={id} />
  </Link>
))}
<Switch>
  <Route
    path="/api/events/:id"
    render={props => <Description number={props.match.params.id} />}
  />
</Switch>

В родительском компоненте храните массив объектов с данными:

data: () => ({
  items: [],
}),

На основе этого массива создаёте с помощью v-for экземпляры дочернего компонента, к которым цепляете посредством v-model элементы массива:

<child-component v-for="(n, i) in items" v-model="items[i]"></child-component>

В дочернем компоненте делаете вычисляемое свойство: объект с данными, получаемый из родителя, заворачиваете в Proxy, который будет перехватывать установку значений свойств, собирать новый объект и отправлять его назад родителю:

props: [ 'value' ],
computed: {
  innerValue() {
    return new Proxy(this.value, {
      set: (target, prop, val) => {
        this.$emit('input', { ...target, [prop]: val });
        return true;
      },
    });
  },
},

Используете свойства этого объекта в v-model:

<input type="text" v-model="innerValue.someStringProp">
<input type="checkbox" v-model="innerValue.someBooleanProp">
<input type="number" v-model.number="innerValue.someNumberProp">

https://jsfiddle.net/aghpL7tf/2/

/^[78][12345680]\d{9}$/

str.replace(/[#&|?:«»]/g, '')

onChange = ({ target: { value, dataset: { objName, key } } }) => {
  this.setState(({ [objName]: obj }) => ({
    [objName]: {
      ...obj,
      [key]: value,
    },
  }));
}

<input
  data-obj-name="fr"
  data-key="name"
  value={this.state.fr.name}
  onChange={this.onChange}
/>
<input
  data-obj-name="en"
  data-key="title"
  value={this.state.en.title}
  onChange={this.onChange}
/>

В родителе заводите счётчик экземпляров дочернего компонента:

data: () => ({
  repeat: 0,
}),

И рендерите соответствующее их количество:

<child-component v-for="i in repeat"></child-component>

При необходимости отрендерить ещё - увеличиваете значение счётчика:

<button @click="repeat++">add one more child component instance</button>

Вместо

<a href="#">{{item.links.join(' ')}}</a>

пусть будет

<a v-for="n in item.links" href="#">{{ n }}</a>

const $table = $('table');
const columnIndex = // здесь должен быть номер столбца с числами

const sum = $table
  .find('tr:visible')
  .get()
  .reduce((acc, n) => acc + +$('td', n).eq(columnIndex).text(), 0);

$table
  .find('th')
  .eq(columnIndex)
  .text(`Вес (${sum})`);

https://jsfiddle.net/xre59sn2/