Add method to React component

Last Updated: August 1, 2021

Now we will see how to add a method to React component. If you are not familiar with creating React components you can refer to 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'




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

export const Product = createReactClass({

       return discount/100*this.props.unit_price*this.props.qty

		return (
<li>Product Name :{}</li>
<li>Unit Price : {this.props.unit_price}</li>
<li>Qty :{this.props.qty}</li>
<div>Total Discount {this.calculateDiscount(}</div>

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

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