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
How to show hide component on Click in React JS?
React JSX
Using this keyword access component properties and methods
onClick Event binding and get event name in ReactJs
How to build and use a custom react component from scratch?
How to pass data from child component to its parent in ReactJS?
Glyphicon Rating Star component
Check checkbox is Checked or Unchecked
Loop inside React JSX
How to render one component in another component in React JS?