¿Cómo es que cuando trato de pasar un método sin paréntesis a un componente React como elemento secundario de uno de los elementos JSX, aparece un error en la consola, pero tan pronto como agrego paréntesis, todo está bien y elegante?
Por ejemplo:
randomFunction(){ //do something here } Esto me da un error: <div>{this.randomFunction}</div>
Pero esto no. <div>{this.randomFunction()}</div>
Lo que aumenta mi confusión es la forma en que se llaman los métodos cuando se usan como accesorios. No usamos el paréntesis entonces.
this.randomFunction devuelve la función en sí
this.randomFunction() realmente llama (ejecuta) la función
Una función no es un elemento JSX válido, pero el retorno de una función ejecutada sí lo es.
Así que si:
function randomFunction() { return <div><div> }Y llamas:
<div>{this.randomFunction()}<div>La función tendrá éxito