Aquí está la pregunta. Quiero pasar el índice de cada elemento secundario a la función handleChange , pero no puedo obtenerlo))) Cuando hago clic en TabPanelItem aparece el error handleChange no es una función ¿Cuál es el problema?
Elemento principal:
const TabPanel = () => { const tabsPanelData = [ {label: 'tab1'}, {label: 'tab2'}, {label: 'tab3'} ]; const [tabIndex, settabIndex] = useState(0); const handleChange = (index) => { console.log(index); } return ( <StyledTabPanel> {tabsPanelData.map((tabPanelItem, i) => { const {label, handleChange} = tabPanelItem; return ( <TabPanelItem key={i} label={label} handleChange={handleChange(i)} /> ) })} </StyledTabPanel> ) }y mi componente hijo:
const TabPanelItem = ({ label, handleChange }) => { return ( <StyledTabPanelItem onClick={handleChange}> {label} </StyledTabPanelItem> ) }cometiste un error en esta linea
const {label, handleChange} = tabPanelItem;usted no maneja el cambio en el tablePanelItem
debería ser
const {label} = tabPanelItem; y está ejecutando la función handleChange al hacer esto
<TabPanelItem key={i} label={label} handleChange={handleChange(i)} /> o pasas la función handleChange como el cuerpo de una función de flecha como accesorios del TabPanelItem
<TabPanelItem key={i} label={label} handleChange={() => handleChange(i)} />luego, al hacer clic, se ejecutaría la función de flecha