Как решить проблему одинаковых ключей?

WbICHA, Предки там не совсем разные. Родительский компонент один, он же, прокидывает в качестве пропса currentSlide индекс текущего слайда (определяется скроллом, комментарием выше прикрепил пен).
BannerContent в свою очередь, ловит этот currentSlide и достает контент по индексу (currentSlide) из массива (bannerContent):

// Banner.tsx
const [currentSlide, setCurrentSlide] = React.useState(0);
...
<BannerContent currentSlide={currentSlide} />

// BannerContent.tsx
const { subTitle, title } = bannerContent[currentSlide];

Как решить проблему одинаковых ключей?

szQocks, Ссылка (также прикрепил в топик*)

Как решить проблему одинаковых ключей?

szQocks, Прошу прощения, добавил полный код компонента в вопрос

Как решить проблему одинаковых ключей?

WbICHA,
Если я уберу ключи, то анимация перестанет работать и будет резко меняться текст
Если я добавлю ключи, то анимация будет работать, но в текущем варианте, анимация работает криво

Ключи здесь нужны для фреймера, который просто требует от меня их, чтобы анимация работала

Как решить проблему одинаковых ключей?

WbICHA, Я поправлю вопрос

Мне просто нужно, чтобы был эффект уходящего старого текста и приходящего нового текста
Читая доку по фреймеру, наткнулся только на AnimatePresence

- Как я понимаю: подобное можно достичь через ключ

Как решить проблему одинаковых ключей?

szQocks, А не подскажешь, что именно неверно?

Как решить проблему одинаковых ключей?

szQocks, Мне просто нужно, чтобы был эффект уходящего старого текста и приходящего нового текста
Читая доку по фреймеру, наткнулся только на AnimatePresence

Как решить проблему одинаковых ключей?

szQocks, Алексей Уколов,
Вообще, мне нужно реализовать что-то около вертикального слайдера
Есть хорошие библиотеки на этот счет? (может быть я просто пишу свой велосипед и не догуглился)

Как решить проблему одинаковых ключей?

Алексей Уколов,
Пытался делать что-то около рандомного индекса через какой-нибудь uid, но будто бы тянуть еще сотни пакетов не особо хочется. Есть, конечно, Math.random, но как будет правильнее его реализовать в данном случае?
И есть ли вообще другое решение подобных ситуаций? Ибо это выглядит, как аргументированный костыль :d

Как решить проблему одинаковых ключей?

szQocks, Алексей Уколов,
ps. Пытаясь решить проблему, начал уже добавлять аля titleIndex + subTitleIndex

export const bannerContent: IBannerContent[] = [
  {
    titleIndex: 1,
    subTitleIndex: 2,
    title: "От идеи до взлета ваших крыльев",
    subTitle: "Время попробовать что-то новое и что-то стоящее",
  },
  {
    titleIndex: 3,
    subTitleIndex: 4,
    title: "Ваше небо под нашим контролем",
    subTitle: "Отказоустойчивость и контроль",
  },
  {
    titleIndex: 5,
    subTitleIndex: 6,
    title: "Координировать действия стало проще",
    subTitle: "Автоматизация процесса — наша главная задача",
  },
];

Cannot read properties of undefined (reading 'button')?

WbICHA,

.button{
	cursor: pointer;
	padding: 13px 30px;
	border-radius: 15px;
	outline: 0;
	border: 0;
	font-family: var(--font-geist, Geist), sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.32px;
}

.buttonDefault{
	background-color: #EDEDED;
	color: var(--background-color, #141414);
}

.buttonAccent{
	background-color: var(--accent-color, #E83F20);
	color: var(--font-color, #EDEDED);
}

.buttonStroke{
	background-color: transparent;
	color: var(--font-color, #EDEDED);
	border: 1px solid var(--font-gray-color, #A1A1A1);
}

.buttonDisabled{
	background-color: var(--stroke-color, #353535);
	color: var(--font-gray-color, #A1A1A1);
}

.buttonWithoutBg{
	background-color: transparent;
	color: var(--font-color, #EDEDED);
}

Cannot read properties of undefined (reading 'button')?

Может быть дело в использовании css модулей? Или я где-то просчитался..

Как называется цветовая тема из примера?

Спасибо огромное! Вы мой спаситель!
А есть такое на вебшторм?

Как называется цветовая тема из примера?

Александр, Перетыкал практически все, но не нашел как-то (

Как добавить класс одному элементу если у другого висит определенный класс?

crazyestomel, Тогда можете задать кастомную дату в атрибуты элементов из списка, на подобии:

<ul>
<li data='prize'>Призы</li>
</ul>

Далее сохраняя активный атрибут элемента в хранилище, а при загрузке страницы его доставать, раскрывая нужный элемент

Как сделать плавное появление элементов как в этом примере?

Благодарю, а есть с локомотивом какой-то пример вместе со свойством opacity ?

Как сделать плавное появление элементов как в этом примере?

Около того, но если взглянуть на то, что я привёл в виде примера, то там элементы приобретают opacity и translate по мере скролла.. То есть поэтапное появление, а не мгновенное срабатывание за счёт приобретения класса появления

Как сделать плавный переход высоты при навигации React?

Понял, спасибо.
Тогда как с помощью React Transition Group решить мою задачу? Ведь у меня происходить роутинг по контенту, относительно которого должна меняться высота родительского элемента (плашки)

Как сделать плавную анимацию высоты React?

Александр, спасибо, посчитал нужным создать второй вопрос: https://qna.habr.com/q/1154698

Как сделать плавную анимацию высоты React?

Александр, Не могли бы вы ещё подсказать.. Как сделать так, чтобы эта высота на элементе переходила плавно?
Сейчас это выглядит как-то резко