0xD34F

const createArr = (source, maxLength) =>
  [...Array(1 + Math.random() * maxLength | 0)].map(() => source[Math.random() * source.length | 0]);


const [ arr1, arr2, arr3 ] = [...Array(3)].map(() => createArr(arr, 5));

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

const createArr = ([...source], maxLength) => Array.from(
  { length: Math.min(source.length, 1 + Math.random() * maxLength | 0) },
  () => source.splice(Math.random() * source.length | 0, 1)[0]
);

или, копируем исходный массив, перемешиваем копию, берём случайное количество элементов из начала:

function createArr(source, maxLength) {
  const arr = source.slice();

  for (let i = arr.length; --i > 0;) {
    const j = Math.random() * (i + 1) | 0;
    [ arr[j], arr[i] ] = [ arr[i], arr[j] ];
  }

  return arr.slice(0, 1 + Math.random() * maxLength | 0);
}

function createTable(rows, cols) {
  const maxLen = `${rows * cols}`.length;

  return [...Array(rows)]
    .map((n, i) => [...Array(cols)]
      .map((m, j) => `${cols * i + j + 1}`.padStart(maxLen, 0))
      .join(' '))
    .join('\n');
}

или

function createTable(rows, cols) {
  const zeroStr = Array(1 + Math.ceil(Math.log10(rows * cols + 1))).join(0);
  let result = '';

  for (let i = 0; i < rows; i++) {
    result += i ? '\n' : '';

    for (let j = 0; j < cols; j++) {
      result += (j ? ' ' : '') + (zeroStr + (cols * i + j + 1)).slice(-zeroStr.length);
    }
  }

  return result;
}

https://datatables.net/reference/option/language.search

series: {
  0: {
    color: 'red',
  },
},

const grouped = arr.reduce((acc, n) => {
  const [ , month, year ] = n.x.split('.');
  (acc[year] ??= Array(12).fill(0))[month - 1] += n.y;
  return acc;
}, {});

/^[^/|%[\]]*$/.test(str)

или, соответственно, если зайти с другой стороны:

!/[/|%[\]]/.test(str)

const SHOW_INITIAL = 3;
const SHOW_MORE = 5;
const listSelector = '.myList';
const itemSelector = 'li';
const showSelector = '.loadMore';
const hideSelector = '.showLess';

$(listSelector)
  .on('click', showSelector, function({ delegateTarget: t }) {
    $(`${itemSelector}:hidden`, t).slice(0, SHOW_MORE).show();
  })
  .on('click', hideSelector, function({ delegateTarget: t }) {
    $(`${itemSelector}:visible`, t).slice(SHOW_INITIAL).slice(-SHOW_MORE).hide();
  })
  .each(function() {
    $(itemSelector, this).slice(0, SHOW_INITIAL).show();
  });

Можно dangerouslySetInnerHTML использовать. Например.

Но вообще, это тут не обязательно.

Регулярные выражения в PHP не поддерживают модификатор g. Хотите найти всё - используйте preg_match_all.

BrowserRouter в PageHeader - убрать.

Возможные типы сложить в массив:

const types = [ 'text', 'password', 'number' ];

Завести стейт под текущий тип:

const [ type, setType ] = useState('text');

<input type={type} />

Обновлять его при взаимодействии с элементами управления:

const onTypeChange = e => setType(e.target.value);

Которые могут быть обычными кнопками:

{types.map(n => (
  <input
    type="button"
    value={n}
    className={n === type ? 'active' : ''}
    onClick={onTypeChange}
  />
))}

Или радио:

{types.map(n => (
  <label>
    <input
      type="radio"
      value={n}
      checked={n === type}
      onChange={onTypeChange}
    />
    {n}
  </label>
))}

Или это может быть select:

<select value={type} onChange={onTypeChange}>
  {types.map(n => <option>{n}</option>)}
</select>

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

<button onClick={() => setType(types[(types.indexOf(type) + 1) % types.length])}>
  next type
</button>

https://jsfiddle.net/y7r8xv9b/

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

const sorted = (arr, path) => arr
  .map(function(n) {
    return [ n, this.reduce((p, c) => p?.[c], n) ];
  }, path.split('.'))
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);

А вообще, предлагаю изменить тип второго параметра со строки на функцию:

const sorted = (arr, key) => arr
  .map(n => [ n, key(n) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);


const sortedByCommentsCount = sorted(arr, n => n.comments.count);
const sortedByLengthDesc = sorted(arr, n => -n.length);

FormData:

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(this));
  console.log(JSON.stringify(data, null, 2));
});

https://jsfiddle.net/c9t3vLje/

zipped = list(zip(labels, data))
groupedLabels = list(set(labels))
groupedData = [ sum(v for k, v in zipped if k == n) for n in groupedLabels ]

Массив данных для вывода передаётся в ItemsList из родительского компонента, в кнопку из родительского же компонента передаётся обработчик клика, в котором количество передаваемых в ItemsList элементов увеличивается.

https://jsfiddle.net/oLce047k/

Сложить в массив экземпляры picker'ов; в общем обработчике выбора даты устанавливать выбранную дату всем экземплярам и обновлять их. Как-то так:

const pickers = $('селектор элементов, на которых инициализируются экземпляры календаря')
  .datepicker({
    onSelect(formattedDate, date, picker) {
      pickers.forEach(n => n !== picker && (
        n.currentDate = picker.currentDate,
        n.selectedDates = [ date ],
        n.update()
      ));
    },
  })
  .get()
  .map(n => $(n).data('datepicker'));

То же, но для третьей версии:

const options = {
  onSelect({ date, datepicker }) {
    pickers.forEach(n => n !== datepicker && n.update({
      viewDate: datepicker.viewDate,
      selectedDates: [ date ],
    }, {
      silent: true,
    }));
  },
};

const pickers = Array.from(
  document.querySelectorAll('селектор элементов с календарями'),
  n => new AirDatepicker(n, options)
);

<select id="country"></select>
<select id="city"></select>

const setOptions = (el, data) =>
  el.innerHTML = data
    .map(n => `<option>${n}</option>`)
    .join('');


const countries = [
  { name: 'Германия', cities: [ 'Берлин', 'Бонн', 'Мюнхен' ] },
  { name: 'Франция', cities: [ 'Париж', 'Лион', 'Марсель' ] },
  { name: 'Италия', cities: [ 'Рим', 'Неаполь', 'Милан' ] },
];


const country = document.querySelector('#country');
const city = document.querySelector('#city');


setOptions(country, countries.map(n => n.name));

country.addEventListener('change', function() {
  setOptions(city, countries.find(n => n.name === this.value).cities);
});

country.dispatchEvent(new Event('change'));

https://jsfiddle.net/ky4qbt8a/

const sortedInventory = Object
  .values(inventory)
  .sort((a, b) => a.price - b.price)
  .map(n => `${n.title} - ${n.amount}`)
  .join('\n');

Вместо элементов работайте с разметкой:

const html = '<p class="table__text"></p>'.repeat(data.length);
column.forEach(n => n.insertAdjacentHTML('beforeend', html));