Почему не устанавливается свойство key, хотя оно существует?

Question

[Nikita Shchypylov]

Всем привет
Столкнулся с такой проблемой :
Item.js :

..
class Item extends Component {
  render() {
    return (
        
        // Тут key не работает. Оно просто не появляется в элементе в бразузере. Если я ставлю другой значение - тогда работает, но Реакт ругается, что оно не уникальное
        <div className="item" key={this.props.id}>
          <div>{this.props.content}</div>
          /* Тут оно работает! Выводит по порядку 1, 2, 3 и так до 7 */
          <div>{this.props.id}</div>
          <input type="text" placeholder="here we go"/>
        </div>
    );
  }
}
..

Items.js :

<Item id={item.id} content={item.component} />

Другими словами, я ставлю нормальное значение для key, а на выходе Реакт как будто "не принимает" его и в браузере я вижу элемент без key и ошибку типа :
Warning: Each child in an array or iterator should have a unique "key" prop.

Answer 1

[Антон Спирин]

Правильно это делать так:

{items.map(item => (
  <Item key={item.id} content={item} />
)}

Свойство key надо определять снаружи компонента элемента списка, а не внутри.

Вот ссылка на документацию, где есть примеры правильного и неправильного использования с пояснениями
https://reactjs.org/docs/lists-and-keys.html#extra...