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
How to pass properties from parent component to child component in React JS? How to create Functional Component? How to pass data from child component to its parent in ReactJS? How to use arrow function in React stateless components? Component displays Height and Width on window resize React Components