estoy recibiendo esta advertencia
Warning: Tabs: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass itYa estoy pasando la clave en mi componente. No sé dónde estoy haciendo mal.
aquí está mi código https://codesandbox.io/s/priceless-edison-g09nz?file=/src/App.js
<Tabs> {data.reduce((result, tabItem, tabIndex) => { result.push(<Tab {...getTabItemProps(tabItem, tabIndex)} key={tabIndex}/>); return result; }, [])} </Tabs>Tabulaciones.js
<> <ul className="rc64nav" ref={tabsRef}> {tabsVisible.reduce((result, tabItem, tabIndex) => { result.push(tabItem); return result; }, [])} </ul> <ul> <hr/> <div>break</div> <hr/> {tabsHidden.reduce((result, tabItem, tabIndex) => { result.push(tabItem); return result; }, [])} </ul> </>Tab.js
import React from "react"; const Tabs = ({ title,hidden }) => { return <li className={hidden ? 'hidden':'not-hidden'}>{title}</li>; }; export default Tabs;Solucioné el error: https://codesandbox.io/s/beautiful-sid-l9753?file=/src/tabs.js .
Lo que cambié: agregué un accesorio llamado tabKey . En App.js :
const getTabItemProps = (tabItem, tabIndex) => ({ title: tabItem, key: tabIndex, tabKey: tabIndex }); Hice tabs.js de referencia de tabKey en lugar de intentar usar la key como accesorio:
const { tabKey = index } = tabItem.props;