Tengo un componente de pestañas que acepta la matriz de elementos como accesorios y estoy tratando de asignar la clave a los elementos clonados usando React.cloneElement() sin suerte. Estoy pasando elementos como una matriz. Mapeando esa matriz de elementos, clonando cada componente en esa matriz e intentando asignar una clave a cada elemento. Pero, sigo recibiendo la advertencia de que cada componente debe tener una clave. ¿Cómo puedo asignar claves a cada componente usando React.cloneElement()?

A continuación se muestra mi matriz de elementos que estoy pasando a mi componente Tabs.

A continuación se muestra mi componente de pestañas:

 import React, {useState, useEffect, useCallback} from 'react'; import classes from './tabs.module.css'; const Tabs = ({ tabsData, active = 0 }) => { const [activeTab, setActiveTab] = useState(active); const setActiveTabIndex = useCallback((index) => { setActiveTab(index) }, [activeTab]) return ( <div className={classes.tabsContainer}> <ul className={classes.tabsList}> { tabsData.map((item, index) => ( <li className={`${classes.tab} ${index === activeTab && classes.activeTab}`} onClick={() => setActiveTabIndex(index)}>{ item.tabTitle }</li> ))} </ul> <div className={classes.textContainer}> {tabsData[activeTab].content.map((ElementItem, index) => ( React.cloneElement(ElementItem, {key:index}) ))} </div> </div> ) } export default Tabs

A continuación se muestra la matriz que estoy pasando a ese componente de pestañas.

 const tabsData = [ { tabTitle: "Description", content: [<h1 className={classes.tabTitle}>{'Product Description'}</h1>, productDetails.shortDescription.html ? <RichContent html={productDetails.shortDescription.html} /> : <RichContent html={"<p>No short description found</p>"} />] }, { tabTitle: "Attributes", content: [<h1 className={classes.tabTitle}>{'Product Attributes'}</h1>, <CustomAttributes customAttributes={customAttributesDetails.list} />] } ]

También probé lo siguiente para intentar asignar una clave a cada elemento.

 <React.Fragment key={index}> { React.cloneElement(ElementItem) } </React.Fragment>