How to use function inside JSX expression?
A function can be defined and use by the expression, in that case the output of a function is taken by the component to produce content.
Example
import React, { Component } from 'react';
const length = 20, breadth = 10;
function shape() {
return length == breadth ? "Sqaure" : "Rectangle";
}
function area() {
return length * breadth;
}
class App extends Component {
render = () =>
<span class="d-block p-2 bg-dark text-white">
Area of { shape() }: { area() }
</span>
}
export default App;
Most Helpful This Week
How to pass data from child component to its parent in ReactJS?
How to show hide component on Click in React JS?
React JS Count number of checkboxes are checked
How to use createElement in React JS?
How to use onChange and onClick event in React JS?
Example of React Bootstrap Datatable
Check which Radio button is Selected or Clicked
Using this keyword access component properties and methods
Loop inside React JSX
Embed JavaScript Expressions in JSX