0xD34F

Дичь какая-то - зачем вам хранить количество минут и часов? Достаточно секунд (да, их будет не 0-59, а сколько угодно), минуты и часы вычисляются, если нужны.

сбрасывается на 0 и начинает отсчет с предыдущего состояния

Что неудивительно - метод run работает с "несброшенными" данными. Чтобы иметь доступ к актуальному состоянию, используйте функциональное обновление.

const pick = (obj, keys) => Object.fromEntries(keys.map(k => [ k, obj[k] ]));

const newArr = arr.map(n => pick(n, keys));

Если в элементах arr присутствуют не все keys, и в элементах результирующего массива изначально отсутствующие появиться не должны, тогда

const pick = (obj, keys) =>
  Object.fromEntries(Object.entries(obj).filter(m => keys.includes(m[0])));

// или

const pick = (obj, keys) =>
  keys.reduce((acc, n) => (obj.hasOwnProperty(n) && (acc[n] = obj[n]), acc), {});

Порезать строку на слова, заменить, склеить обратно:

bs = ' '.join(n.upper() if n in cms else n for n in bs.split(' '))

Или можно регулярными выражениями воспользоваться:

for n in cms:
  if n in bs:
    bs = re.sub(f'\\b{n}\\b', n.upper(), bs)

Прячете a, показывать пытаетесь img.

document.querySelectorAll('.photos img').forEach(n => {
  n.parentNode.style.display = +n.alt === alt ? '' : 'none';
});

При поиске надо получить данные пользователя - оттуда достаёте количество репозиториев (свойство public_repos), вычисляете количество страниц.

Добавляете эффект на изменение настроек пагинации - там выполняете загрузку информации о репозиториях.

https://codesandbox.io/s/for-httpsqnahabrcomq99469...

Потому что вы получаете не полный список репозиториев, а только одну страницу (первую). Дефолтное количество элементов на странице - 30. Читайте документацию внимательнее:

per_page integer
The number of results per page (max 100).

Default: 30

function getTimes(start, end, interval) {
  const result = [];
  const _start = moment(start, 'HH:mm');
  const _end = moment(end, 'HH:mm');

  if (_start > _end) {
    _end.add(1, 'day');
  }

  while (_start <= _end) {
    result.push(_start.format('HH:mm'));
    _start.add(interval, 'minutes');
  }

  return result;
}


const times = getTimes('10:00', '18:00', 30);

Вместо нескольких стейтов пусть будет один - объект. Общий обработчик onChange достаёт из целевого объекта помимо значения ещё и имя инпута, одновременно являющегося именем обновляемого свойства (его придётся передавать в экземпляры CustomTextField, а внутри самого CustomTextField прокидывать внутрь TextField). Вот так (как добавить два других свойства - думаю, сами догадаетесь):

interface IFormData {
  firstName: string;
  lastName: string;
}

const [ formData, setFormData ] = React.useState<IFormData>({
  firstName: '',
  lastName: '',
});

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => setFormData({
  ...formData,
  [e.target.name]: e.target.value,
});

<CustomTextField name="firstName" value={formData.firstName} onChange={onChange} />
<CustomTextField name="lastName" value={formData.lastName} onChange={onChange} />

<!-- или -->

{Object.entries(formData).map(([ k, v ]) => (
  <CustomTextField key={k} name={k} value={v} onChange={onChange} />
))}

Уберите эффект.

Функция получения списка репозиториев - пусть получает в качестве параметра имя пользователя:

async function fetchRepos(username) {
  let result = [];

  try {
    result = (await axios.get(`https://api.github.com/users/${username}/repos`)).data;
  } catch(e) {
    console.error(e);
  }

  setRepos(result);
}

Передавайте её в компонент с формой поиска:

<Search onSearch={fetchRepos} />

Внутри которого ей будет передаваться текущее значение из input'а:

function Search({ onSearch }) {
  const [ searchValue, setSearchValue ] = useState('');

  function onSubmit(e) {
    e.preventDefault();
    onSearch(searchValue);
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={searchValue}
        onChange={e => setSearchValue(e.target.value)}
      />
      <button>Найти</button>
    </form>
  )
}

https://jsfiddle.net/2foy6rbw/

Сложить в массив пары из значения select'а и соответствующего значению имени класса, изменяющего цвет:

const valueAndClass = [
  [ 'yes', 'bg-success' ],
  [  'no', 'bg-warning' ],
];

По событию change перебирать массив, переключать классы в зависимости от равенства соответствующих им значений тому, что выбрано в select'е:

document.querySelector('table').addEventListener('change', e => {
  for (const td of e.target.closest('tr').cells) {
    for (const [ value, className ] of valueAndClass) {
      td.classList.toggle(className, value === e.target.value);
    }
  }
});

Лучше бы конечно задавать класс строке, а не каждой ячейке отдельно. Уберите bg-primary у ячеек, добавьте его строкам, а обработчик события change пусть будет таким, например:

document.querySelector('table').addEventListener('change', ({ target: t }) => {
  const tr = t.closest('tr');
  valueAndClass.forEach(n => tr.classList.toggle(n[1], n[0] === t.value));
});

const $container = $('.promo__cats');
$container.append(...$container
  .children()
  .get()
  .map(n => [ n, +$('.promo__price', n).text().replace(/\D/g, '') ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0])
);

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.