How to Call a Function inside a Render in React Jsx

Question

I want to call a function inside some embedded html  I tried the following but the function isn t called  Would this be the incorrect way of calling a function inside a render method    import React    Component  PropTypes   from  react    export default class PatientTable extends Component         constructor props            super props           this state               checking false                  this renderIcon   this renderIcon bind this          renderIcon        console log  came here       return         lt div gt Function called lt  div gt               render         return           lt div className  patient-container  gt           this renderIcon                lt  div gt

User · Accepted Answer

To call the function you have to add      this renderIcon

User · Answer

x000D   x000D  class App extends React Component   x000D     x000D    buttonClick    x000D      console log  came here   x000D       x000D      x000D     x000D    subComponent     x000D      return   lt div gt Hello World lt  div gt    x000D      x000D     x000D    render     x000D      return    x000D         lt div className  patient-container  gt  x000D             lt button onClick  this buttonClick bind this   gt Click me lt  button gt  x000D             this subComponent    x000D          lt  div gt  x000D         x000D      x000D     x000D   x000D   x000D    x000D   x000D  ReactDOM render  lt App  gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D    it depends on your need  u can use either  this renderIcon   or bind this renderIcon bind this   UPDATE  This is how you call a method outside the render    buttonClick        console log  came here      render        return           lt div className  patient-container  gt             lt button onClick  this buttonClick bind this   gt Click me lt  button gt          lt  div gt            The recommended way is to write a separate component and import it

User · Answer

The fix was at the accepted answer  Yet if someone wants to know why it  worked and why the implementation in the SO question didn t work   First  functions are first class objects in JavaScript  That means they are treated like any other variable  Function can be passed as an argument to other functions  can be returned by another function and can be assigned as a value to a variable  Read more here   So we use that variable to invoke the function by adding parentheses    at the end   One thing   If you have a function that returns a funtion and you just need to call that returned function  you can just have double paranthesis when you call the outer function

[javascript] How to Call a Function inside a Render in React/Jsx

Examples related to javascript

Examples related to reactjs

Examples related to function

Examples related to render

Examples related to jsx