Cómo llamar a una función dentro de un renderizado en React / Jsx

Solución:

Para llamar a la función tienes que agregar ()

{this.renderIcon()}   

class App extends React.Component {
  
  buttonClick(){
    console.log("came here")
    
  }
  
  subComponent() {
    return (<div>Hello World</div>);
  }
  
  render() {
    return ( 
      <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
          {this.subComponent()}
       </div>
     )
  }
  


}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Depende de su necesidad, puede usar this.renderIcon() o atar this.renderIcon.bind(this)

ACTUALIZAR

Así es como se llama a un método fuera del render.

buttonClick(){
    console.log("came here")
}

render() {
   return (
       <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
       </div>
   );
}

La forma recomendada es escribir un componente separado e importarlo.

La solución estaba en la respuesta aceptada. Sin embargo, si alguien quiere saber por qué funcionó y por qué no funcionó la implementación en la pregunta SO,

Primero, las funciones son objetos de primera clase en JavaScript. Eso significa que se tratan como cualquier otra variable. La función puede pasarse como argumento a otras funciones, puede ser devuelta por otra función y puede asignarse como valor a una variable. Leer más aquí.

Entonces usamos esa variable para invocar la función agregando paréntesis () al final.

Una cosa, si tiene una función que devuelve una función y solo necesita llamar a esa función devuelta, puede tener una doble paréntesis cuando llame a la función externa () ().

---

---

Utiliza Nuestro Buscador