tengo 2 componentes El padre es una lista mapeada. En cada representación de mapa, hay un menú desplegable. El componente del menú desplegable tiene un accesorio de controlador al que pasa una función y le devuelve los datos del elemento en el que se hizo clic. Consulte el código simplificado a continuación.

 const ParantList = () => { const listData = [1,2,3] const handleClick = (x, i) => { // Here x will return data from the child // i returns nothing but I would like it to be the current index of listData return [x, i] } return ( <div> {listData.map((x, i) => <Child handleClick={handleClick} /> )} </div> ) } const Child = ({handleClick}) => { const differentList = [4,5,6] return ( <Dropdown> {differentList.map(x => <Dropdown.Item onClick={()=>handleClick(x)}> {x} </Dropdown.Item> )} </Dropdown>) }

El problema está en la función de clic del controlador en el padre, necesito los datos de differentList en el hijo para pasar a la función, que funciona bien. Sin embargo, también necesito el índice o los datos del elemento correspondiente (listData) en el que se hizo clic en el menú desplegable en el mapa principal. Entonces, la función handleClick necesita los datos de ambas listas.

La solución simple es pasar el índice actual de la lista listData al hijo. SIN EMBARGO, en realidad, el componente secundario es un paquete que no puedo (o no sé cómo) cambiar el controlador de función. ¿Hay una manera simple de pasar una función a un niño pero pasar un accesorio al mismo tiempo? ¡Gracias!