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
Working with Forms, Inputs and onChange Events in ReactJs 3 Different Examples - How State Works in React? How to use arrow function in React stateless components? onMouseDown and onMouseUp Event handling in ReactJs Check which Radio button is Selected or Clicked React JS update Div content on click