Почему требует еще ключей?

Question

[TreeFall1]

У меня есть приложение на React (Next.js). Я перебрать каждый ключ из объекта и массив значений и после этого вывести это все через map на страницу. Все работает как надо, но в консоли я вижу предупреждение: "Warning: Each child in a list should have a unique "key" prop.". Вот мой код:

{
					// Перебор всех ключей
					Object.keys(library).map(category=>{
						return(
							<>
								<h2 className={Styles['category-name']} key={`library__categoryTitle-${category}`}>{category}</h2>
								<ul className={Styles['category-list']} key={`library__categoryList-${category}`}>
									{/* Перебор всех значений по ключу */}
									{library[category].map(el=>{
										return(
												<li className={Styles['category-element']} key={`library__${category}-${el}`}>{el}</li>
										)
									})}
								</ul>
							</>
						)
					})
				}

Я указал для каждого элемента свой key, но ошибку появляется.
Вот объект по которому делаю перебор:

export const library = {
	'Здоровье': ['Выпить витаминов', "Лечь спать до 23:00", "Принять таблетки"],
	"Физическая активность": ["Ходить в зал", "Пройти 10000 шагов", "Сделать зарядку"],
	"Саморазвите": ["Учить английский язык", "Посмотреть обучающее видео"],
	"Финансы": ["Распределить зарплату на месяц", "Оплатить услуги", "Инвестировать деньги"]
}

Answer 1

[Алексей Уколов]

Ключ должен быть у самого верхнего элемента внутри цикла. В вашем случае это fragment:

<React.Fragment key={category}>
 <h2>...</h2>
 <ul>...</ul>
</React.Fragment>

Comments

[TreeFall1]

Спасибо!