import React,{useState} from 'react'; export function App(props) { const [fruit, setFruit ] = useState("apple") function settingFruit_1() { setFruit("mango"); } return ( <div className='App'> <h1>{fruit}</h1> //why am I getting the error when calling the function like this onClick = {settingFruit_1()} <button onClick = {settingFruit_1()}> submit </button> </div> ); }Aquí está el error que veo:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. at renderWithHooks (<anonymous>:11510:25) at mountIndeterminateComponent (<anonymous>:14733:23) at beginWork (<anonymous>:15659:24) at HTMLUnknownElement.callCallback2 (<anonymous>:3454:24) at Object.invokeGuardedCallbackDev (<anonymous>:3479:26) at invokeGuardedCallback (<anonymous>:3513:41) at beginWork$1 (<anonymous>:18904:17) at performUnitOfWork (<anonymous>:18371:22) at workLoopSync (<anonymous>:18308:15)onClick Function espera que pase una referencia a la devolución de llamada que ejecuta cuando el usuario hace clic en ese botón. Pero aquí llamas a esa función en onClick.
Solución:
Intente usar la siguiente sintaxis:
<button onClick={settingFruit_1}>submit</button>
onClick <button onClick = {settingFruit_1}> submit </button> // only pass reference without the ()