Tengo una aplicación de incremento básica que reacciona con el siguiente código. Pasar la función handleClick al primer botón funciona bien, sin embargo, pasarlo a un componente secundario IcrementButton que devuelve exactamente el mismo botón da el error: React: Expected `onClick` listener to be a function, instead got a value of `object . ¿Por qué funciona para el primer botón pero no para el botón del componente secundario y cómo se puede solucionar? gracias de antemano.
import { useState } from "react"; import "./styles.css"; const IncrementButton = (handleClick) => { return ( <button onClick={handleClick}>+</button> ) } export default function App() { const [num, setNum] = useState(0) const handleClick = (e) => { e.preventDefault() console.log('clicked') setNum(prev => prev += 1) } return ( <div className="App"> <div>{num}</div> <button onClick={handleClick}>+</button> <IncrementButton handleClick={handleClick} /> </div> ); }No desestructuraste el clic del controlador. Prueba el siguiente código
const IncrementButton = ({handleClick}) => { return ( <button onClick={handleClick}>+</button> ) }Dado que IncrementButton es un componente personalizado, todos los accesorios que se le pasan se envían como un objeto y, para acceder a él, debe usar props.property . Hay 2 formas de hacer que tu código funcione.
const IncrementButton = (props) => { return ( <button onClick={props.handleClick}>+</button> ) } const IncrementButton = ({handleClick}) => { return ( <button onClick={handleClick}>+</button> ) }Eso no funciona porque React pasa todos los accesorios en un Component como un solo Object .
Tiene dos formas de obtener la referencia de la función handleClick .
es6 ) const IncrementButton = ({handleClick}) => { return ( <button onClick={handleClick}>+</button> ) }props.propertyName const IncrementButton = (props) => { return ( <button onClick={props.handleClick}>+</button> ) }