Add method to React component

January 5, 2018

Now we will see how to add method to React component. If you are not familiar with creating React component you can refer this tutorial
I have the following code inside the index.js file

import React from 'react'
import {render} from 'react-dom'
import {Product} from './product.js'

render(

    ,
    document.getElementById('root')

)

Then I will create method in my component file product.js

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 (

				
  • Product Name :{this.props.name}
  • Unit Price : {this.props.unit_price}
  • Qty :{this.props.qty}
Total Discount {this.calculateDiscount(this.props.discount)}
) } })

You can see the calculateDiscount() method in code and you can call the method this.calculateDiscount()