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;