React mapping, требующий ключа к idx, не знаю, почему моя функция отсутствует

Question

Я сопоставляю массив массивов и распечатываю пользователя на основе карты поиска. Функция работает, но я получаю «Каждый ребенок в массиве или итератор должен иметь уникальный« ключ ». Я назначил ключ для тегов img и p - я думаю, что div нужен один? Не уверен.

const renderUser = this.props.data.filter(obj => { 
      return this.props.name === obj.name; 
       }).map((obj, idx) => { 
         return (
          <div className="cols2"> 
           <div> 
            <img key={idx} src={`${obj.image}`} className="avatar"></img>< br/> 
           </div> 
           <div style={spaceStyle}> 
            <p key={idx}> 
             <span className="profileText" alt="Profile Name">Name:</span> {obj.name} < br/> 
             <span className="profileText" alt="Profile Email">Email:</span> {obj.email} <br /> 
             <span className="profileText" alt="Profile Flavor">Flavor:</span> {obj.flavor} <br /> 
             <span className="profileText" alt="Profile STR">STR:</span> {obj.str} <br /> 
             <span className="profileText" alt="Profile AGI">AGI:</span> {obj.agi} <br /> 
             <span className="profileText" alt="Profile INT">INT:</span> {obj.int} <br /> 
             <span className="profileText" alt="Profile STA">STA:</span> {obj.sta} <br /> 
            </p> 
           </div> 
          </div> 
     ); 

Answer 1

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

От the documentation:

Ключи помогают Реагировать определить, какие элементы были изменены, добавлены или удалены. Ключи должны быть предоставлены элементам внутри массива, чтобы дать элементам устойчивое тождество. Ключи имеют смысл только в контексте окружающего массива.

const renderUser = this.props.data.filter(obj => this.props.name === obj.name).map((obj, idx) => { 
    return (
    <div key={idx} className="cols2"> 
     <div> 
     <img src={`${obj.image}`} className="avatar"></img>< br/> 
     </div> 
     <div style={spaceStyle}> 
     <p> 
      <span className="profileText" alt="Profile Name">Name:</span> {obj.name} < br/> 
      <span className="profileText" alt="Profile Email">Email:</span> {obj.email} <br /> 
      <span className="profileText" alt="Profile Flavor">Flavor:</span> {obj.flavor} <br /> 
      <span className="profileText" alt="Profile STR">STR:</span> {obj.str} <br /> 
      <span className="profileText" alt="Profile AGI">AGI:</span> {obj.agi} <br /> 
      <span className="profileText" alt="Profile INT">INT:</span> {obj.int} <br /> 
      <span className="profileText" alt="Profile STA">STA:</span> {obj.sta} <br /> 
     </p> 
     </div> 
    </div> 
); 

Answer 2

Ключ должен быть применен к внешнему элементу ребенка - <div className="cols2">:

<div className="cols2" key={idx}> 

Вы должны удалить ключ из внутренних <p> и <img> элементов:

<img key={idx} src={`${obj.image}`} className="avatar"> -> <img src={`${obj.image}`} className="avatar">        

<p key={idx}> -> <p>