Golang React JS Technology Blog

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
State and Props in React How to handle events using expressions inside JSX? Glyphicon Rating Star component Using this keyword access component properties and methods How to perform computation inside expression using ternary operator? How to pass data from child component to its parent in ReactJS? Embed JavaScript Expressions in JSX React JS Count number of checkboxes are checked What is state in React? Example of React JS with Material UI components