0xD34F

class App extends React.Component {
  state = {
    colors: [ 'раз цвет', 'два цвет', 'три цвет', 'ещё какой-то цвет', 'и ещё' ],
    selectedColor: '',
  }

  onChange = e => {
    this.setState({
      selectedColor: e.target.value,
    });
  }

  render() {
    const { colors, selectedColor } = this.state;

    return (
      <div>
        <select value={selectedColor} onChange={this.onChange}>
          <option disabled hidden value="">SELECT COLOR</option>
          {colors.map(n => <option>{n}</option>)}
        </select>

        {selectedColor &&
          <p style={{ color: selectedColor }}>
            {selectedColor} color selected
          </p>
        }
      </div>
    );
  }
}

onChange={(event) => {
  return test(event, id);
}}

И чем же здесь является id? Откуда он берётся? Уж точно не из input'a - этот будет event.target.id.

onChange={() => {
  return handlerOnChange;
}}

Круглые скобки где после handlerOnChange? И зачем постоянно делаете return, что и кому пытаетесь вернуть?

Короче, id достаёте из target, и не надо никаких дополнительных обёрток над обработчиками событий при их назначении экземплярам TextField:

const onChange = e => {
  const { id } = e.target;
  ...

<TextField
  onChange={onChange}
  ...

class App extends React.Component {
  state = {
    links: [],
    newLink: {
      href: '',
      text: '',
    },
  }

  onChange = ({ target: { name, value } }) => {
    this.setState(({ newLink }) => ({
      newLink: {
        ...newLink,
        [name]: value,
      },
    }));
  }

  addLink = e => {
    e.preventDefault();

    this.setState(({ links, newLink }) => ({
      links: [ ...links, newLink ],
      newLink: Object.fromEntries(Object.keys(newLink).map(n => [ n, '' ])),
    }));
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.links.map(n => (
            <li>
              <a href={n.href}>{n.text}</a>
            </li>
          ))}
        </ul>
        <form onSubmit={this.addLink}>
          {Object.entries(this.state.newLink).map(([ name, value ]) => (
            <div>
              {name}:
              <input name={name} value={value} onChange={this.onChange} />
            </div>
          ))}
          <input type="submit" value="Добавить" />
        </form>
      </div>
    );
  }
}

Добавьте ordinal: false в настройки оси X.

const container = document.querySelector('селектор контейнера с select\'ами');
const selectSelector = 'селектор select\'ов';
const input = document.querySelector('селектор input\'а');
const updateInput = selects => input.value = Array.from(selects, n => n.value).join(' ');

container.addEventListener('change', function() {
  updateInput(this.querySelectorAll(selectSelector));
});

// или

const selects = container.querySelectorAll(selectSelector);
const onChange = updateInput.bind(null, selects);
selects.forEach(n => n.addEventListener('change', onChange));

swiper.params.slidesPerView = новое количество отображаемых слайдов;
swiper.update();

https://jsfiddle.net/y0p8r91u/1/

карточка и модалка, это как один компонент

вдруг у меня будет таких карточек не 6 а 106

А зачем вам шесть окон? Не говоря уже о ста шести. Сделайте одно, которое будет отображать данные любой из карточек:

function Portfolio() {
  const [ modalData, setModalData ] = useState(null);
  const onClick = (e) => setModalData(cardsData[e.target.dataset.index]);
  const onClose = () => setModalData(null);

  return (
    <div>
      {cardsData.map((n, i) => (
        <button data-index={i} onClick={onClick}>
          open modal #{i + 1}
        </button>
      ))}

      <Modal isOpen={!!modalData} onRequestClose={onClose}>
        {modalData && (<>
          <h2>{modalData.title}</h2>
          <button onClick={onClose}>close</button>
          <div>{modalData.things}</div>
        </>)}
      </Modal>
      /*
       * или, вместо использования isOpen рендерим окно только в том случае,
       * если есть что в нём показывать
       */
      {modalData && (
        <Modal onRequestClose={onClose}>
          <h2>{modalData.title}</h2>
          <button onClick={onClose}>close</button>
          <div>{modalData.things}</div>
        </Modal>
      )}
    </div>
  );
}

Это может быть отсутствие canvas'a - вы пытаетесь отрендерить график сразу же после создания экземпляра компонента, когда никаких DOM-элементов ещё не создано. Оберните код в watcher'е в nextTick.

return {
  ...state,
  array: state.array.map(n => n.id === action.newObject.id ? action.newObject : n),
};

function parallel(tasks, onAllTasksComplete) {
  const results = [];
  let numCompleted = 0;

  function onTaskComplete(index, result) {
    results[index] = result;
    if (++numCompleted === tasks.length) {
      onAllTasksComplete(results);
    }
  }

  for (let i = 0; i < tasks.length; i++) {
    const onComplete = r => onTaskComplete(i, r);
    const result = tasks[i](onComplete);
    if (result !== undefined) {
      onComplete(result);
    }
  }
}

const process = (funcs, initialArg) => funcs.reduce((arg, f) => f(arg), initialArg);

Получить месяц с числом, число обрезать:

const getMonthNameInGenitiveCase = (date = new Date) =>
  date.toLocaleString('ru', {
    month: 'long',
    day: 'numeric',
  }).split(' ')[1];

Или, сделать массив с месяцами, выбирать нужный элемент:

const getMonthNameInGenitiveCase = (date = new Date) =>
  [
    'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
    'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря',
  ][date.getMonth()];

раз говнокод

два говнокод

Точно так же, как и всё остальное - добавляете описание в props, используете v-bind для привязки функции к экземпляру дочернего компонента.

Но вообще, так в vue делать не принято.
Принято иначе:

1. В дочернем компоненте генерируете событие: <button @click="$emit('click')".
2. В родительском на него подписываетесь: <component @click="onClick".

Хотя, конечно, чисто технически это тоже будет передачей функции - назначенные в родителе обработчики событий доступны в дочернем компоненте через свойство $listeners, так что вместо $emit('click') или (если надо передать родителю какие-то данные) $emit('click', аргумент) можно (но не нужно) написать $listeners.click или $listeners.click(аргумент).

const openSelector = '[data-target]';
const closeSelector = '.modal__close';
const modalSelector = '.modal';
const activeClass = 'modal--active';

Делегирование, общий обработчик клика назначается один раз для всех:

document.addEventListener('click', ({ target: t }) => {
  const open = t.closest(openSelector);
  if (open) {
    document.querySelector(`#${open.dataset.target}`).classList.add(activeClass);
  } else {
    t.closest(closeSelector)?.closest(modalSelector).classList.remove(activeClass);
  }
});

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

const onClick = (selector, handler) => document
  .querySelectorAll(selector)
  .forEach(n => n.addEventListener('click', handler));

onClick(openSelector, ({ currentTarget: { dataset: { target } } }) => {
  document.querySelector(`#${target}`).classList.add(activeClass);
});

onClick(closeSelector, e => {
  e.currentTarget.closest(modalSelector).classList.remove(activeClass);
});

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

const obj = {
  val: 1,
  valueOf() {
    return this.val ^= 1;
  },
};

// или

const obj = {
  val: '1',
  toString() {
    return this.val = '1'.slice(this.val.length);
  },
};

// или

const obj = {
  val: true,
  [Symbol.toPrimitive]() {
    return this.val = !this.val;
  },
};

console.log(obj == false, obj == true); // true true
console.log(...Array.from({ length: 5 }, () => +obj)); // 0 1 0 1 0

Как будем определять, должен ли элемент массива остаться:

function mustStay(n) {
  for (const m of arr2) {
    if (m.content.insuranceType === n.value) {
      return false;
    }
  }

  return true;
}

// или

const mustStay = n => arr2.every(m => m.content.insuranceType !== n.value);

// или

const mustStay = function(n) {
  return !this.has(n.value);
}.bind(new Set(arr2.map(n => n.content.insuranceType)));

Собираем новый массив:

const filteredArr1 = arr1.filter(mustStay);

Удаляем элементы исходного массива:

arr1.reduceRight((_, n, i, a) => mustStay(n) || a.splice(i, 1), null);

// или

arr1.splice(0, arr1.length, ...arr1.filter(mustStay));

// или

arr1.length -= arr1.reduce((acc, n, i, a) => (
  a[i - acc] = n,
  acc + !mustStay(n)
), 0);

const steps = [ /* ... */ ];
let currentStep = 0;

const quizQuestion = document.querySelector('.quiz__question');
const quizAnswers = document.querySelector('.quiz__answers');

const prevBtn = document.querySelector('.quiz__button_prev');
const nextBtn = document.querySelector('.quiz__button_next');

prevBtn.addEventListener('click', () => nextStep(-1));
nextBtn.addEventListener('click', () => nextStep(+1));

function nextStep(stepChange) {
  currentStep = Math.max(0, Math.min(steps.length - 1, currentStep + stepChange));

  prevBtn.disabled = currentStep === 0;
  nextBtn.disabled = currentStep === steps.length - 1;
  
  quizQuestion.innerHTML = steps[currentStep].question;
  quizAnswers.innerHTML = steps[currentStep].answers.map(n => `<li>${n}</li>`).join('');
}

nextStep(0);

" -> "

ну а лучше уберите строку из шаблона в свойство компонента