Почему выходит ошибка Each child in a list should have a unique «key» prop?

Question

[Александр Иванов]

Почему выходит ошибка Each child in a list should have a unique "key" prop?
когда я выставил элементу key={Math.random()}

location.pathname.split('/').map((crumb, idx) => {
    if(idx === 0) crumbs[idx] = {path: '/', title: 'Home'}
    if(idx === 1) crumbs[idx] = {path: crumb, title: crumb}
    if(idx > 1) crumbs[idx] = {path: crumbs[idx-1].title+'/'+crumb, title:crumb}
  })

<ol className={styles.breadcrumbsList} key={Math.random()}>
        {crumbs.map((crumb, idx) => 
          <>
            {idx >= 1 && <div> / </div>}
            <Crumb path={crumb.path} title={crumb.title} style={styles.crumbs} key={Math.random()} />
          </>
        )}
      </ol>

Comments

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

path: crumbs[idx-1].title+'/'+crumb

Баг, нужно не к title конкатенировать, а к path. И вместо map должен быть forEach.

Answer 1

[Alexandroppolus]

key надо выставлять не для Crumb, а для фрагмента:

<React.Fragment key={...}>
    {idx >= 1 && <div> / </div>}
    <Crumb path={crumb.path} title={crumb.title} style={styles.crumbs} />
</React.Fragment>

ну и Math.random() для key - худшее, что ты мог придумать. Наверняка у crumb есть какой-нибудь id, вот его и надо использовать. Или, например, path, title, - что-то из них ведь уникальное, не повторяется в массиве crumbs?
на крайний случай можно idx

Comments

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

Код генерации для crumbs же показан. Id там нет, а вот path уникален.

[Александр Иванов]

ошибка осталась и я Math.random() поменял на uuid

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

Александр Иванов, вы не перенесли же key во фрагмент... Иначе бы ошибка пропала. Код покажите свой.

[Александр Иванов]

перенес!

<React.Fragment key={v4()}>
        {crumbs.map((crumb, idx) => 
          <>
            {idx >= 1 && <div> / </div>}
            <Crumb path={crumb.path} title={crumb.title} style={styles.crumbs} />
          </>
        )}
      </React.Fragment>

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

Ну вам же даже прям код написали, а вы его скопировать не можете... Снаружи цикла этот key не нужен никому. Вы по ссылке переходили, читали, что там написано? Максимально же уже разобранный вопрос.

[Александр Иванов]

Алексей Уколов, да, признаю не внимательность! спасибо!

[Alexandroppolus]

Александр Иванов,

key={v4()}

‍
key={crumb.path}

[Alexandroppolus]

Александр Иванов, у тебя должен быть один и тот же key для crumb, независимо от рендера. Иначе будет перемонтироваться Crumb, это совсем ни к чему