0xD34F

Вместо .text((d, i) => { ... пусть будет

.each((d, i, a) => {
  const el = d3.select(a[i]);
  const max = this.lineData[i];
  let value = 0;

  const intervalId = setInterval(() => {
    if (++value == max) {
      clearInterval(intervalId);
    }

    el.text(value);
  }, 500 / max);
});

Пусть Search хранит значение, которое вводит пользователь, и принимает обработчик клика по кнопке, которому при вызове будет передаваться значение:

const Search = props => {
  const [ value, setValue ] = React.useState('');

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={() => props.onSearch(value)}>Search</button>
    </div>
  );
};

А в родительском компоненте, соответственно, в Search передаёте функцию, которая обновит что там вам надо:

<Search onSearch={search => setValue({ ...value, inputValue: search })} />

https://jsfiddle.net/fp0dvhrg/

Класс лучше переключайте не у .img-block, а у их самых дальних не общих предков, т.е., у .documents_block. В этом случае не придётся переписывать js-код, если вдруг потребуется стилизовать ещё-что то, кроме .img-block, или если решите изменить внутреннюю структуру .documents_block. Вместо .класс дополнительные стили надо будет прописывать у .класс .img-block.

const itemSelector = '.documents_block';
const buttonSelector = `${itemSelector} .open-doc-list`;
const contentSelector = '.documents-content';
const activeClass = 'active';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const onClick = e => $(e.currentTarget)
  .closest(itemSelector)
  .toggleClass(activeClass)
  .find(contentSelector)
  [toggleEffect]();


// обработчик клика подключаем к кнопкам
$(buttonSelector).click(onClick);

// или, если предполагается добавление новых блоков уже после подключения
// обработчика, то лучше будет повесить его на документ, тогда всё будет
// работать как надо без каких-либо дополнительных действий
$(document).on('click', buttonSelector, onClick);

const fourValues = four.map(Object.values);

const result = three.map(n => {
  const values = Object.values(n);
  const intersections = fourValues.filter(m => values.every(v => m.includes(v)));
  return `${values} - ${intersections.length
    ? `входит в / ${intersections.map(m => `${m}`).join(' / ')} /`
    : 'нет вхождений'}`;
});

Кого надо пронумеровать:

const containerSelector = '.bakeries-slider';
const itemSelector = '.bakeries-slider__span';

Как пронумеровать (зависимость текста от индекса элемента):

const getNumber = i => (i + 1) + '.';
// или
const getNumber = i => `${-~i}.`;
// или
const getNumber = i => ''.concat(++i, '.');

Если использовать jquery, то индекс элемента принимает коллбек метода text:

$(containerSelector).each(function() {
  $(itemSelector, this).text((i, text) => text + getNumber(i));
});

В противном случае, есть варианты:

document.querySelectorAll(containerSelector).forEach(container => {
  const items = container.querySelectorAll(itemSelector);

  // индекс передаётся в коллбек forEach'а
  items.forEach((n, i) => n.textContent += getNumber(i));

  // или, отдаётся итератором entries
  for (const [ i, n ] of items.entries()) {
    n.appendChild(document.createTextNode(getNumber(i)));
  }

  // или, можно самостоятельно обновлять переменную с индексом
  for (let i = 0; i < items.length; i++) {
    items[i].insertBefore(new Text(getNumber(i)), null);
  }

  // причём цикл для этого не обязателен
  (function next(i, n = items.item(i)) {
    n && (n.append(getNumber(i)), next(-~i));
  })(0);
});

companiesDict = { n['id']: { k: n[k] for k in ('name', 'disabled') } for n in arr1 }
arr3 = [ { **n, **companiesDict.get(n['company'], {}) } for n in arr2 ]

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

Выносите $('#m_prev').click и $('#m_next').click за пределы $('.norutyun img').click.

return {
  ...state,
  basketItems: state.basketItems.map(n => n.id === action.id
    ? { ...n, clicked: !n.clicked }
    : n
  ),
};

Чего не надо:

const key = 'status';
const value = 'maybe';

Фильтруем:

const newArr = arr.filter(n => !n[key].includes(value));

Если же и правда слово, тогда регулярные выражения используйте или предварительно режьте строку на куски:

const reg = RegExp(`\\b${value}\\b`);
const newArr = arr.filter(n => !reg.test(n[key]));

// или

const newArr = arr.filter(function(n) {
  return !n[key].match(this);
}, RegExp(`(^| )${value}( |$)`));

// или

const newArr = arr.filter(n => !n[key].split(' ').includes(value));

Не надо никакого mouseup. Открываем документацию к используемому плагину, смотрим, какие доступны обработчики событий, выбираем подходящий:

$('#sortable').sortable({
  stop() {
    const values = $('input[name="slider-id"]', this).get().map(n => n.value);
  },
});

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

Оберните каждый из элементов .reviews__item в дополнительный div.

list(zip(a, b, c))

Какое свойство смотрим, какие значения хотим увидеть:

const key = 'workplace';
const values = [ 'office', 'hotel' ];

Достаём объекты:

const result = arr.filter(function(n) {
  return this.has(n[key]);
}, new Set(values));

// или

const result = values.flatMap(((grouped, n) => grouped[n] ?? []).bind(
  null,
  arr.reduce((acc, n) => ((acc[n[key]] = acc[n[key]] ?? []).push(n), acc), {})
));

// или

const result = [];
for (const n of arr) {
  for (const m of values) {
    if (m === n[key]) {
      result.push(n);
      break;
    }
  }
}

// или

const result = [];
for (let i = 0; i < arr.length; i++) {
  if (~values.indexOf(arr[i][key])) {
    result[result.length] = arr[i];
  }
}

// или

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

replacements = {
  'Black' => 'African American',
  'AI/AN**' => 'American Indian or Alaskan Native',
  'NH/PI**' => 'Native Hawaiian or Other Pacific Islander'
}

replaced = arr.map{|n| replacements[n] or n}

search = [ 'White', 'Black', 'Asian', 'Hispanic' ]

max = arr
  .select{|n| search.include?(n['description'])}
  .max_by{|n| n['count']}

Продублированы данные - зачем? Пусть результат поиска будет изначально пуст, выполняйте поиск после создания экземпляра компонента. Чтобы не пришлось дублировать код поиска, разделите метод на два: один обновляет значения для поиска, другой выполняет собственно поиск и вызывается в двух местах - в componendDidMount и после обновления объекта значений для поиска.

Стейт обновляется асинхронно, так что сразу после вызова setState вы не увидите в стейте только что обновлённое значение и будете выполнять поиск по старому. Вторым параметром в setState можно передать функцию, которая будет выполнена после обновления стейта - передавайте метод поиска. Или же, в componentDidUpdate проверяйте, что текущий объект поиска не равен предыдущему и в этом случае вызывайте метод поиска.

Конвертация в json - зачем?

Почему любая успешная проверка приводит к помещению элемента данных в массив результатов поиска? Так результаты будут дублироваться - скольким значениям из объекта поиска соответствует элемент данных, столько раз он будет помещён в массив результатов. Надо убедиться, что элемент данных соответствует всем значениям из объекта поиска, и только после этого помещать его в массив результатов.

Значение общего поиска должно обрабатываться в особом порядке - надо проверять его соответствие любому из свойств элемента данных.

https://jsfiddle.net/vLk97n6y/1/

document.addEventListener('click', () => {
  console.log(performance.now());
}, { once: true });

или

const t = new Date;
document.addEventListener('click', function onClick() {
  console.log(new Date - t);
  document.removeEventListener('click', onClick);
});