0xD34F

Что передаётся в компонент AddProductForm:

AddProduct={this.props.addProduct}

Как вы пытаетесь переданное использовать:

this.props.addProduct(product);

Правда считаете, что между "a" и "A" разницы нет?

Какое сегодня число, о каком select'е идёт речь и как обновлять состояние его option'ов:

const today = new Date().getDate();
const select = document.querySelector('select');
const toggle = option => option.disabled = option.value < today;

Обновляем:

select.querySelectorAll('option').forEach(toggle);

// или

Array.prototype.forEach.call(select, toggle);

// или

for (const n of select.options) {
  toggle(n);
}

// или

for (let i = 0; i < select.children.length; i++) {
  toggle(select.children[i]);
}

const duplicateContent = el =>

  // можно добавить копии вложенных узлов
  el.append(...el.cloneNode(true).childNodes);

  // или добавить копию разметки
  // el.insertAdjacentHTML('beforeEnd', el.innerHTML);

  // или перезаписать разметку в удвоенном виде
  // el.innerHTML += el.innerHTML;
  // el.innerHTML = el.innerHTML.repeat(2);
  // el.innerHTML = Array(3).join(el.innerHTML);
  // el.innerHTML = String.prototype.concat.apply('', Array(2).fill(el.innerHTML));
  // el.innerHTML = el.innerHTML.replace(/.+/, '$&$&');
  // el.innerHTML = /(.+)/.exec(el.innerHTML).join``;

document.querySelectorAll('.btn').forEach(duplicateContent);

// или

for (const n of document.getElementsByClassName('btn')) {
  duplicateContent(n);
}

"Оптимизировать" - в смысле сократить? Вот так можно:

const getDuplicatesIndex = (arr, key = n => n) =>
  Object.fromEntries(Object
    .entries(arr.reduce((acc, n, i) => ((acc[key(n)] ??= []).push(i), acc), {}))
    .filter(n => n[1].length > 1)
  );

Если среди значений массива могут быть такие, которые, будучи различными, имеют одинаковый строковый эквивалент, то обычный объект следует заменить на Map:

const getDuplicatesIndex = (arr, key = n => n) =>
  new Map(Array
    .from(arr.reduce((acc, n, i) => {
      const k = key(n);
      acc.set(k, acc.get(k) ?? []).get(k).push(i);
      return acc;
    }, new Map))
    .filter(n => ~-n[1].length)
  );

Функция - это объект, ей можно добавить нужное свойство:

function wrapper(fn) {
  function wrapped(...args) {
    return fn.apply(this, args);
  }

  wrapped.reset = () => console.log('hello, world!!');

  return wrapped;
}

myMap.enterFullscreen()

Вы невнимательно читали документацию. Этот метод принадлежит не самой карте, а map.container.

var myMap = new ymaps.Map('map', {

Раз используете Vue, так делать не надо. Вместо id передавайте в конструктор карты сам элемент, для получения которого следует использовать ref:

<div ref="map"></div>

mounted() {
  ymaps.ready(() => {
    this.map = new ymaps.Map(this.$refs.map, {
    ...

https://jsfiddle.net/Lw98kjyc/

x?.[Symbol.iterator] instanceof Function

return {
  ...state,
  briefingType: state.briefingType.map(n => n.type === action.payload.type
    ? {
        ...n,
        users: n.users.map(m => m.userName === action.payload.userName
          ? {
              ...m,
              date: action.payload.date,
            }
          : m
        ),
      }
    : n
  ),
};

когда нажимаю на другой блок, то цвет кнопки не становится прежним

Становится. Проявите немного терпения, вам и четырёх месяцев ждать не придётся:

transition: background 9999999s;

Правда, происходит это вовсе не по причине нажатия на другой блок - что такое псевдокласс :active вы, очевидно, не разобрались.

Cделайте скрытые радиокнопки, которые будут нажиматься через label, и стилизуйте в качестве "нажатых" элементы, расположенные после :checked.

например

preg_replace('~\(\s*cm\s*\)~', '(cm)', $str)

state = {
  value: 0,
  options: [ 'Не отмечено', 'Отмечено' ],
}

onChange = ({ target: t }) => {
  this.setState(() => ({
    value: +t[t.dataset.stateAttr],
  }));
}

render() {
  const { value, options } = this.state;

  return (
    <div>
      <select
        value={value}
        onChange={this.onChange}
        data-state-attr="value"
      >
        {options.map((n, i) => <option value={i}>{n}</option>)}
      </select>
      <br />
      <label>
        <input
          type="checkbox"
          checked={value}
          onChange={this.onChange}
          data-state-attr="checked"
        />
        {options[value]}
      </label>
    </div>
  );
}

const longestStr = arr.reduce((max, n) => max.length > n.length ? max : n, '');
// или
const longestStr = arr.sort((a, b) => b.length - a.length)[0];
// или
const longestStr = arr.reduce((acc, n) => (acc[n.length] = n, acc), []).pop();

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

function max(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let result = null;

  for (const n of data) {
    const val = getVal(n);
    if (!result || result[1] < val) {
      result = [ n, val ];
    }
  }

  return result?.[0];
}


const longestStr = max(arr, 'length');

Сравнивайте, делайте выводы:

document.querySelector('#check').addEventListener('change', e => {
  document.querySelector('#password-input').type = e.target.checked
    ? 'text'
    : 'password';
});

Доступен через cdn.

Берёте и подключаете.

Добавляете в компонент свойство, которое будет содержать текущее значение выпадающего списка:

data: () => ({
  status: '',
  ...

Получаете массив возможных (не считая дефолтного) значений выпадающего списка:

computed: {
  statuses() {
    return [...new Set(this.characters.map(n => n.status))];
  },
  ...

Сам список пусть создаётся так, например:

<select v-model="status">
  <option value="">&lt; ALL &gt;</option>
  <option v-for="n in statuses">{{ n }}</option>
</select>

Ну и фильтруете, наконец:

computed: {
  filteredCharacters() {
    const search = this.search.toLowerCase();
    const status = this.status;

    return this.characters.filter(n => (
      (!search || n.name.toLowerCase().includes(search)) &&
      (!status || status === n.status)
    ));
  },
  ...

Коротко:

const getRepetition = (arr, repeated) => Array
  .from(arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map))
  .reduce((acc, n) => (n[1] === repeated && acc.push(n[0]), acc), []);

Длинно:

function getRepetition(arr, repeated) {
  const result = [];
  const count = {};

  for (const n of arr) {
    if (!count.hasOwnProperty(n)) {
      count[n] = 0;
    }

    count[n]++;
  }

  for (const n in count) {
    if (count[n] === repeated) {
      result.push(+n);
    }
  }

  return result;
}

Не надо манипулировать маркерами напрямую. Храните в данных компонента индекс активного маркера, по событиям enter/leave устанавливайте его значение, в зависимости от которого передавайте в экземпляры компонента маркера картинки иконок:

data: () => ({
  map: {
    activeMarkerIndex: null,
    markerIconImages: [ MAP_MARKER_DEFAULT, MAP_MARKER_ACTIVE ],
    ...

<ymap-marker
  v-for="(n, i) in markers"
  :icon="{
    ...map.markerIcon,
    imageHref: map.markerIconImages[+(map.activeMarkerIndex === i)],
  }"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

<li
  v-for="(n, i) in objects"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

https://jsfiddle.net/bw5eym2n/