Create Stateless functional component for ReactJS

Last Updated: January 6, 2018

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