Create Stateless functional component for ReactJS

This is another way to create React components. Stateless functional component is JS pure functions which has no state.

This is the product component which I have created using createReactClass method

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)} 
				
			)
	}
})

Now we will see how we can convert above code to stateless function component
So this is the syntax for stateless function is JS

const mycomponent = (props)=>{
    
{props.name} 
}

So this is the stateless functional component code of the above code

	
	const  calculateDiscount=(props)=>{
       return props.discount/100*props.unit_price*props.qty
    }

	export const Product = (props)=>(

		

			

				
 Product Name :{props.name} 
				
 Unit Price : {props.unit_price} 
				
 Qty : {props.qty} 
			

			
 Total Discount {calculateDiscount(props)} 
			
		

	)