Golang React JS Technology Blog

How to set property values using expression?

Formatting the HTML elements and child components, expressions can be used to set the value of props,. The result of getClassName method is used to set the className prop of the div element.

Example

import React, { Component } from 'react';
 
class App extends Component {
 
constructor(props) {
    super(props);
    this.dimension = {
        len: 40,
        bre: 40
    }
}
 
shape() {
    return this.dimension.len == this.dimension.bre ? "Sqaure" : "Rectangle";
}
 
area() {
    return this.dimension.len * this.dimension.bre;
}
 
getClassName() {
  return this.dimension.len == this.dimension.bre
      ? "badge badge-primary"
      : "badge badge-secondary"
}
 
render = () =>
    <div className={this.getClassName()}>
      Area of { this.shape() } : { this.area() }
    </div>
}
 
export default App;
Most Helpful This Week
Create Functional Component using ES6 Arrow Syntax How to build and use a custom react component from scratch? 3 Different Examples - How State Works in React? React Static Website with Material UI theme Check checkbox is Checked or Unchecked Glyphicon Rating Star component How to render raw HTML content in React JS? Check which Radio button is Selected or Clicked Example of React Bootstrap Datatable Embed JavaScript Expressions in JSX