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
React Props onClick Event binding and get event name in ReactJs What is JSX? How to use React-Bootstrap component? onMouseDown and onMouseUp Event handling in ReactJs How to get a clicked HTML element in React? How to use function inside JSX expression? Check checkbox is Checked or Unchecked How to use arrow function in React stateless components? Using this keyword access component properties and methods