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
Using this keyword access component properties and methods
How to render raw HTML content in React JS?
How to use React-Bootstrap component?
React Props
How to use arrow function in React stateless components?
How to show hide component on Click in React JS?
Embed JavaScript Expressions in JSX
React JS onClick event handler
Loop inside React JSX
Working with Forms, Inputs and onChange Events in ReactJs