Natebash, всплывашка должна быть поверх всего остального. Соответственно её надо монтировать в дом отдельно, вне основного дерева. И вручную позиционировать относительно того элемента, на котором вызвали тултип. Монтировать там же, где этот элемент, не получится - из-за контекста наложения https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
см. пример.
AVKor, если числа отрицательные, то в разных языках программирования может быть разный остаток. См. параграф "Знак остатка" в ссылке на википедию. Поскольку для НОД не имеет значения знак чисел (НОД всегда положительный), правильнее будет не заморачиваться и взять числа по модулю.
profesor08, а если завтра добавится ещё какая-нибудь верстка внутри родителя (компонент Test в вопросе), завязанная на items? Или дочерний компонент, который эти items получает в проп и по ним что-то рисует? Тогда уже не получится при изменении данных из компонента Item просто молча перезаписать значение в массиве внутри рефа. Придется пропушивать каждую заинтересованную сторону; кого-то обязательно забудем.. С этим подходом мы теряем реактивность.
Если хочется экономить рендеры родителя, то лучше не изобретать всякие хитрые схемы, а просто использовать MobX.
profesor08, но ведь компонент Item по факту и сам будет всякий раз менять это внешнее значение? (как сказано в комментарии про useRef). Тогда внутренний useState ему без надобности.
Valera Dobroman,
1) Архитектурный бэдпрактис. Код оказывается прибит гвоздями к нестандартному окружению (имеет абсолютно неявные зависимости).
2) Потенциальный конфликт имен - если завтра в глобальную область добавят поле с таким же названием, например, появится HTMLDocument.prototype. hello, которое отличается от твоего, будут веселье.
Сергей Кузнецов, остальные резолвить вручную, смотреть что и как. А некоторые - это отдельные специальные файлы, про которые точно известно, что там надо тупо взять вариант из branch_b.
см. пример.