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(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}

score 139 · Accepted Answer · answered Oct 28 '16 at 04:48

139

To call the function you have to add ()

{this.renderIcon()}

answered Oct 28 '16 at 04:48

dknaack

60,192
27
155
202

3

it depends on your need, u can use either `this.renderIcon()` or bind `this.renderIcon.bind(this)`. is this correct? someone has written it below. – arora Mar 12 '17 at 11:27
super minor note, for those using coffeescript, this would be `{@renderIcon()}` – orion elenzil Sep 05 '19 at 16:01
4

I would recommend NOT doing this. 1.) `renderIcon` is/should be a component. `{this.renderIcon()}` is not how you use components in React. 2.) Your render is the source of truth for what your component is rendering. Abstracting that adds additional complexity. – Galupuf Oct 18 '19 at 14:34
Besides the fact that this answers is 3 years old I am not sure if I agree. IMHO I abstract this kind of things in separate components only if it is used in more than component. Some does it only after 3 reuses. THX for your comment on this old answer. Really appreciate it. All the best. – dknaack Oct 18 '19 at 15:57
BTW. The uppercase is due to my correction chrome extension. – dknaack Oct 18 '19 at 16:01
You mention not abstracting to a component unless you need to reuse it. What's the benefit here of abstracting this to a method? React components are just functions so why do it this way? I've mentioned a couple reasons why I wouldn't do this. What are the reasons to do this? – Galupuf Oct 19 '19 at 16:52
4

For those of you interested in why this is generally and objectively a bad practice, please see this: https://kentcdodds.com/blog/dont-call-a-react-function-component It's worth mentioning that this answer is correct and does a great job of answering the posted question. I just think it's worth the effort of teaching people that if they find themselves writing code like this there is a reason NOT to do it. – Galupuf Dec 11 '19 at 14:27
@dknaack How to call the function only once? – Tomasz Waszczyk Mar 30 '20 at 14:21
@TomaszWaszczyk e.g using the react hook useEffect. – dknaack Mar 30 '20 at 18:34
1

@Galupuf One reason that can justify doing it IMO is that for example you have a condition and dont want to use a nested ternary: `myConditionalRender(){ if(loading) return if(error) return return }` and `render(){
...more stuff ... {myConditionalRenderer()} }`
– jaycee Jan 18 '21 at 00:15
1

Why not just put that condition in a component? It achieves the same things without any of the bad side effects – Galupuf Jan 22 '21 at 17:52

Saahithyan Vigneswaran · Answer 2 · 2018-01-24T08:24:33.140

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>

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 (
       <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
       </div>
   );
}

The recommended way is to write a separate component and import it.

this seems better since when you need to pass event or parameters this works — Pranav Singh, Sep 25 '18 at 12:43

score 3 · Answer 3 · answered Oct 10 '18 at 06:41

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 ()().

How to Call a Function inside a Render in React/Jsx

3 Answers3

Linked

Related