0xD34F

Есть map, и есть map. Вы их явно путаете.

А reduce'а в jquery нет.

Хотите применить reduce - сначала надо сделать массив из набора элементов, варианты тут следующие:

1. get
   
2. toArray
   
3. Array.from
   
4. spread
   

Или вызывайте reduce не напрямую, а через call или apply, например:

const sum = Array.prototype.reduce.call(
  $('input[type="checkbox"]:checked'),
  (acc, n) => acc + +n.value,
  0
);

Давайте не будем копипастить, а сделаем нормальный плагин:

$.fn.customSelect = function() {
  return this.each(function() {
    const $this = $(this).hide();
    const $wrapper = $this.wrap('<div class="select_wrapper"></div>').parent();

    $wrapper.append(`
      <span>${$this.find(':selected').text()}</span>
      <ul class="select_inner">${$this.children().get().map(n => `
        <li data-value="${n.value}">${n.innerText}</li>`).join('')}
      </ul>
    `);
    $wrapper.on('click', 'li', function() {
      $wrapper.children('span').text(this.innerText);
      $this.val(this.dataset.value).trigger('change');
    });
    $wrapper.on('click', function() {
      $('ul', this).slideToggle('fast');
    });
  });
};


$('#materialColor, #kantcolor').customSelect().change(function() {
  console.log(`#${this.id}: "${this.value}"`);
});

$('.datepicker-input').datepicker({
  minDate: 0,
  onClose(dateText, inst) {
    $(this).parent().next('.date').text([
      inst.selectedDay,
      inst.selectedMonth + 1,
      inst.selectedYear
    ].join('-'));
  }
});

$('.date').click(function() {
  $(this).prev('div').find('.datepicker-input').focus();
});

const ancestor = 'селектор элементов, которые надо получить';
const descendant = 'селектор вложенных элементов';

Вариант раз - получаем всех потенциальных предков, отбираем тех, кто содержит кого надо:

Array.prototype.filter.call(
  document.querySelectorAll(ancestor),
  n => n.querySelector(descendant)
)

Вариант два - получаем тех, кто содержится внутри нужных элементов, поднимаемся вверх:

Array.from(
  document.querySelectorAll(`${ancestor} ${descendant}`),
  n => n.closest(ancestor)
)

Вариант три (ну, два с половиной) - получаем потенциальных потомков, пробуем подняться до нужных предков:

[...document.querySelectorAll(descendant)].reduce(
  (acc, n) => ((n = n.closest(ancestor)) && acc.push(n), acc),
  []
)

UPD. Наконец-то дождались (ну, почти):

document.querySelectorAll(`${ancestor}:has(${descendant})`)

Если прямо отвечать на спрошенное - currentTarget.

Но, возможно (если содержимое таблицы может динамически дополняться), было бы разумнее вешать обработчик не на tr, а выше - на tbody, или саму таблицу, если элементов tbody несколько или надо также слушать клики и на строках внутри thead/tfoot. А в обработчике уже пытаться подняться от event.target к элементу строки:

table.addEventListener('click', e => {
  const tr = e.target.closest('tbody tr');
  if (tr) {
    // ...
  }
});

new Date('Fri Oct 05 2018 00:00:00 GMT+0300 (Саудовская Аравия, стандартное время)') / 1000

Зачем onClick? - при повторном клике на инпут класс удалится, а клик снаружи инпута вы так не обработаете. Наверное, стоит использовать onFocus и onBlur:

class App extends React.Component {
  state = {
    classes: [ 'bullshit' ],
  }

  onFocus = () => {
    this.setState(({ classes }) => ({
      classes: [ ...classes, 'focus' ],
    }));
  }

  onBlur = () => {
    this.setState(({ classes }) => ({
      classes: classes.filter(n => n !== 'focus'),
    }));
  }

  render() {
    return (
      <div className={this.state.classes.join(' ')}>
        <input onFocus={this.onFocus} onBlur={this.onBlur} />
      </div>
    );
  }
}

Нет разницы - оба варианта некорректные, таких JSON'ов не бывает.

Конечно, на самом деле вы имели в виду кое-что другое, но... учитесь задавать вопросы.

Общую часть похожих кусков кода превращаем в функцию, а то, чем они различаются, будем передавать в эту функцию в качестве параметров:

[
  [   'region_id',   'regionName' ],
  [ 'district_id', 'districtName' ],
  [     'area_id',     'areaName' ],
  [     'city_id',     'cityName' ],
  [    'place_id',     'cityName' ],
  [        'name',   'streetName' ],
].forEach(([ del, search ]) => {
  if (this.tableParam[del]) {
    delete this.tableParam[del];
    this.searchForm.get(search).patchValue(null);
  }
});

$('input').inputmask({
  mask: '9{1,}.|,9',
  placeholder: ''
})

Ну типа вот.

state отказывается обновляться

Риторический вопрос - а с чего вы решили, что он должен обновляться? Вообще, подобные заблуждения имеют своей причиной крайне слабые знания js, задумайтесь над этим.

Проверяйте в componentDidUpdate, что props изменились - если да, делайте setState (побочным результатом будет двойное обновление компонента, можно избежать этого с помощью shouldComponentUpdate). Или используйте getDerivedStateFromProps.

А ещё лучше - хорошенько подумайте, действительно ли вам нужно дублировать props в state. Вероятно, есть вариант обойтись использованием только props.

Компонент Item, обработчик onImportantClick - надо останавливать всплытие события, чтобы оно не обрабатывалась ещё и в onItemClick, т.е.:

onImportantClick = (e) => {
  e.stopPropagation();
  this.setState(({ important }) => ({
    important: !important
  }));
};

События всплывают. Поэтому обрабатываются несколько раз - на всех предках кликнутого элемента, которым был добавлен обработчик.

Есть два способа исправить подобное поведение.

const containerSelector = '#menu_left';
const itemSelector = `${containerSelector} li`;
const className = 'active';

Первый - останавливайте всплытие событий:

$(itemSelector).click(function(e) {
  e.stopPropagation();
  $(this).addClass(className);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => {
  e.stopPropagation();
  e.currentTarget.classList.add(className);
});

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

$(containerSelector).click(e => {
  $(e.target).closest(itemSelector).addClass(className);
});

// или

document.querySelector(containerSelector).addEventListener('click', e => {
  const li = e.target.closest(itemSelector);
  if (li) {
    li.classList.add(className);
  }
});

Где элементы находятся (родительский элемент), кого из них (минимальный и максимальный индексы в коллекции вложенных элементов родителя) и куда надо переместить:

const parent = document.querySelector('.box').parentNode;

const iMin = 2;
const iMax = 5;

const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

Получаем элементы, перемещаем:

if (parent.children[iMin]) {
  const elems = Array.prototype.slice.call(parent.children, iMin, iMax);
  elems[0].before(wrapper);
  wrapper.append(...elems);
}

// или

const elems = parent.querySelectorAll(`:nth-child(n + ${-~iMin}):not(:nth-child(n + ${-~iMax}))`);
if (elems.length) {
  parent.insertBefore(wrapper, elems[0]);
  elems.forEach(n => wrapper.appendChild(n));
}

// или

if (parent.children.length > iMin) {
  parent.children[iMin].insertAdjacentElement('beforebegin', wrapper);
  for (let i = iMax - iMin, n = null; i-- && (n = wrapper.nextElementSibling);) {
    wrapper.insertAdjacentElement('beforeend', n);
  }
}

Что значит "не промисы, а async/await"? - async/await это тоже промисы.

Используйте await Promise.all, например:

const result = await Promise.all([ 1, 2, 3 ].map((n, i) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`timeout #${i}`);
      resolve(n * 10);
    }, Math.random() * 3000 | 0);
  });
}));

console.log('result:', result);

Замените

{{bDay | date: format}}

на

{{ date | date : toggDate[pic.id] ? 'fullDate' : 'shortDate' }}

А свойство format можно удалить.