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

Question

Ошибка возникает из-за того, что значение ключа не вводится в функцию карты, но я не знаю, как изменить код.

Массив имеет такую ​​структуру:

          const tabContArr=[
        {
            tabTitle:(
                <span className={activeIndex===0 ? "is-active" : ""} onClick={()=>tabClickHandler(0)}>0</span>
            ),
         
        },
        {
            tabTitle:(
                <span className={activeIndex===1 ? "is-active" : ""} onClick={()=>tabClickHandler(1)}>1</span>
            ),
           
        },
        {
            tabTitle:(
                <span className={activeIndex===2 ? "is-active" : ""} onClick={()=>tabClickHandler(2)}>2</span>
            ),
          
        },
        {
            tabTitle:(
                <span className={activeIndex===3 ? "is-active" : ""} onClick={()=>tabClickHandler(3)}>3</span>
            ),
           
        }
    ];

Ошибка в части функции карты.

         {tabContArr.map((section)=>{
                return section.tabTitle
            })}

Answer 1

Попробуйте использовать React Fragments с keyатрибут, как указано в документах React

      {tabContArr.map((section, index)=>{
    return <React.Fragment key={`section-tab-${index}`}>{section.tabTitle}</React.Fragment>
 })}

Answer 2

То, что вы сделали, не является правильным путем. Если у вас есть данные, вместо передачи ReactElement в массив вы должны передать его в функцию карты следующим образом:

      {tabContArr.map((tab, index)=>{
      return <span 
         className={activeIndex === index ? "is-active" : ""} 
         onClick={()=>tabClickHandler(index)} 
         key={`tab-${index}`}>index</span>
})}