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

	)

Create Stateless functional component for ReactJS

January 5, 2018