Create Stateless functional component for ReactJS

January 5, 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({

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

		return (

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

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)=>{

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

	const  calculateDiscount=(props)=>{

	export const Product = (props)=>(

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