Actualmente estoy aprendiendo a reaccionar y siguiendo un video tutorial, y me quedo atascado con un objeto que no se puede pasar a otro método, pero cuando pasé una identificación, funciona bien.
aquí está el método
handleIncrement = (product) => { console.log(product); this.setState({ count: this.state.count + 1 }); };y este es el método que trato de transmitir
render() { return ( <div> <span className={this.getBadgeClasses()}>{this.formatCount()}</span> <button onClick={this.handleIncrement({ id: 1 })} className="btn btn-secondary btn-sm" > Increment </button> </div> ); el producto en onClick={this.handleIncrement(product)} error como indefinido
src\components\counter.jsx Line 19:47: 'product' is not defined no-undef pero si uso onClick={() => this.handleIncrement({ id:1 })} funciona bien, y también funciona cuando uso onClick={(product) => this.handleIncrement(product)}
El problema que tienes es con
onClick={this.handleIncrement({ id: 1 })}Esta es la confusión habitual para los novatos en ReactJS, pero aquí está la regla general, tiene dos formas
parameter funcWithoutParam = () => { console.log('hi') }; onClick={this.funcWithoutParam}parameter handleIncrement = (param) => { console.log(param) } onClick={() => this.handleIncrement({ id: 1 })}El controlador de eventos onClick debe ser una función, no una llamada de función. Es por eso que el ejemplo que proporcionó onClick={() => this.handleIncrement({ id:1 })} funciona como esta es una función anónima, mientras que el ejemplo en el que está llamando a la función no funciona.