Golang React JS Technology Blog

How to pass an Argument to a Method used inside JSX expression?

The expression in below example invokes the shape() and area() method, using the len and bre value as the argument.

Example

import React, { Component } from 'react';
 
class App extends Component {
 
constructor(props) {
    super(props);
    this.dimension = {
        len: 40,
        bre: 50
    }
}
 
shape(l, b) {
    return l == b ? "Sqaure" : "Rectangle";
}
 
area(l, b) {
    return l * b;
}
 
render = () =>
    <span class="d-block p-2 bg-dark text-white">
      Area of { this.shape(this.dimension.len, this.dimension.bre) }:
      { this.area(this.dimension.len, this.dimension.bre) }
    </span>
 
}
 
export default App;
Most Helpful This Week
State and Props in React How to create simple React Router to navigate multiple pages? Glyphicon Rating Star component React JS get Tag Name and Inner Text on Click What is JSX? React JS Count number of checkboxes are checked Component displays Height and Width on window resize How to get a clicked HTML element in React? How to set property values using expression? React JS Blog CRUD operation