0xD34F

Вместо нескольких стейтов пусть будет один - объект. Общий обработчик 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/

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>
    );
  }
}

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

вдруг у меня будет таких карточек не 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>
    </div>
  );
}

Когда обращаетесь к значению, его ещё нет.

А изменения не отслеживаются.

Класс DB - надо добавить дефолтное значение:

class DB {
  info = null;
  ...

Компонент Episodes - добавить эффекту значение DB.info в качестве зависимости:

const Episodes = observer(() => {
  useEffect(() => {
    ...
  }, [ DB.info ]);
  ...

Если же не хотите видеть дефолтное значение info внутри Episodes, тогда его экземпляр следует рендерить только при наличии данных, в App замените return <Episodes />; на return DB.info && <Episodes />;.

Массив выбранных значений у вас есть - вот на его основе и создавайте input'ы:

<div className={css.inputList}>
  {checkedList.map(n => (
    <div className={css.field} key={n}>
      <p>{n}:</p>
      <Input />
    </div>
  ))}
</div>

const grouped = props.mainPage.room.reduce((acc, n) => (
  (acc[n.storey] ??= []).push(n),
  acc
), {});

{Object.entries(grouped).map(([ groupName, group ]) => (
  <div className="group" key={groupName}>
    <h3>{groupName}</h3>
    {group.map(n => <NumberRoom key={n.id} {...n} />)}
  </div>
))}

this.setState(({ todos }) => ({
  todos: todos.map((n, i) => i === index
    ? { ...n, isSuccess: true }
    : n
  ),
}));

setData(result);

Значение result здесь всегда одно и то же, а если значение не изменилось - компонент не будет заново отрендерен.
Можно по-быстрому заставить работать так, как вы хотите, передавая копию объекта: setData({ ...result });.

Визуал jsx элемента, как и вопросы форматирования времени и даты не так важны, как важно просто разобраться с возможной последовательностью действий, как все это описать.

Нечего тут описывать, всё тривиально:

arr.map(n => {
  const start = форматированное значение n.start_at;
  const end = форматированное значение n.end_at;

  return <span>{start} - {end}</span>;
})

Надо импортировать модуль Lazy: import { Lazy } from 'swiper';. Этого вы не сделали.

Подключить его: SwiperCore.use([ Lazy ]);. Этого вы не сделали.

Экземпляру слайдера указать, что необходима ленивая загрузка: <Swiper lazy={true}>. Этого вы не сделали.

Изображениям добавить класс swiper-lazy, атрибут src заменить на data-src. Ну, хоть это у вас есть.

Элементы исходного массива - это данные столбцов. Соответственно, получаете количество строк (максимальная из длин вложенных массивов) и в качестве значения rowspan последним элементам столбцов устанавливаете

1 + количество_строк - количество_элементов_в_данных_текущего_столбца

https://jsfiddle.net/th7w51kp/

чем это может быть вызвано?

Тем, что значение isLoadError меняется только с false на true. Надо его как-то обратно сбрасывать.

Можно следить за значением src, если изменилось, выставлять false:

useEffect(() => setIsLoadError(false), [ src ]);

Другой вариант - в ImagePopup пересоздавать экземпляр компонента Image при изменении данных карточки, указав соответствующий ключ:

<Image key={card ? card.link : 'hello, world!!'}

const [ showImage, setShowImage ] = useState(true);

<button onClick={() => setShowImage(!showImage)}>click me</button>
{showImage ? <img src="..." /> : null}

function Counter({ val, time }) {
  const [ currVal, setCurrVal ] = useState(0);

  useEffect(() => {
    currVal !== val && setTimeout(setCurrVal, time, currVal + 1);
  }, [ currVal ]);

  return <div>{currVal}</div>;
}

https://jsfiddle.net/jsxopeag/

const event = await ticketFactoryContract.methods.eventsList(i).call();
setEvents(events => [ ...events, event ]);

Не надо никакие индексы трогать, достаточно дополнить строку спереди до нужной длины:

const max = 4;

<div>
  {Array.from(
    value.padStart(max, '-'),
    n => <span>{n}</span>
  )}
</div>

const [ selected, setSelected ] = useState({});

const onChange = ({ target: { value, dataset: { id } } }) => {
  setSelected({ ...selected, [id]: value });
};

return (
  <div>
    {data.map(({ id, name, variants }) => (
      <div>
        <div>{name}</div>
        <select
          value={selected[id]}
          data-id={id}
          onChange={onChange}
        >
          <option>ну давай, выбери что-нибудь</option>
          {variants.map(n => <option value={n.price}>{n.data.period}</option>)}
        </select>
        <div>{selected[id] || 'НИЧЕГО НЕ ВЫБРАНО'}</div>
      </div>
    ))}
  </div>
);