You can use ES6 to create ReactJS component.
We will create the following code in ES6 syntsax
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from 'react' var createReactClass = require('create-react-class'); export const Product = createReactClass({ calculateDiscount(discount){ return discount/100*this.props.unit_price*this.props.qty }, render(){ return ( <div> <ul> <li> Product Name :{this.props.name} </li> <li> Unit Price : {this.props.unit_price} </li> <li> Qty{this.props.qty} </li> </ul> <div> Total Discount {this.calculateDiscount(this.props.discount)} </div> </div> ) } }) |
You can see the following code snippet which I have rewritten with ES6 syntax. Here I am extending the React.component to create your Product component. You can see it at line 4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from 'react' export class Product extends React.Component{ calculateDiscount(discount){ return discount/100*this.props.unit_price*this.props.qty } render(){ return ( <div> <ul> <li> Product Name :{this.props.name} </li> <li> Unit Price : {this.props.unit_price} </li> <li> Qty :{this.props.qty} </li> </ul> <div> Total Discount {this.calculateDiscount(this.props.discount)} </div> </div> ) } } |