Tengo un archivo de clase regular en la representación de un componente secundario.
class Parent extends React.Component{ constructor(props){...} onBtnClicked = ({index}) => { this.setState({ btnIndex:index }) }; render(){ return( <Child onBtnClicked={this.onBtnClicked} /> ) } } En el niño, estoy llamando a una función onBtnClicked y enviando un valor.
export default Child = (props) => { let prop = {...props}; return( <Button onClick={handleDragEnd}> </Button> ) function handleDragEnd() { prop.onBtnClicked('87612876'); } } Veo que se llama a la función principal onBtnClicked . Pero el valor es indefinido.
¿Cómo podría pasar el valor?
Estás pasando una cadena a prop.onBtnClicked
prop.onBtnClicked('87612876'); pero intentar desestructurar una propiedad index , que de una cadena, no está definida.
onBtnClicked = ({ index }) => { // <-- "87612876".index -> undefined! this.setState({ btnIndex: index }) };O no se desestructura en la devolución de llamada principal:
onBtnClicked = (btnIndex) => { this.setState({ btnIndex }); }; o pase el valor del componente secundario en un objeto con clave de index para que la devolución de llamada del padre pueda desestructurarlo:
function handleDragEnd() { prop.onBtnClicked({ index: '87612876' }); }