Sorry this is more about lack of enough JS knowledge I think but my question is in my component if I have
<td>{() => this.renderCell(item, col)}</td>
method being used like that it won’t work but being called normally like I have in the component below then it works: What’s the difference?
class TableBody extends Component { renderCell = (item, column) => { if (column.content) return column.content(item); return _.get(item, column.path); }; render() { const { data, columns } = this.props; return ( <tbody> {data.map((item) => ( <tr> {columns.map((col) => ( <td>{this.renderCell(item, col)}</td> ))} </tr> ))} </tbody> ); } }
Advertisement
Answer
sorry that I can’t just comment on this. But what happens is that when you call a function from inside an arrow function in React, like this:
<td>{() => myFunction()}</td>
It runs when you perform a specific action on that element, for example, when you click on a button:
<button onClick={() => myFunction} />
When you don’t call it from inside an arrow function, like you are doing in your code snippet, that function gets called automatically, so, it renders your code:
// Runs automatically <td>{myFunction()}</td> // Only on specific trigger: <td>{() => myFunction()}</td>