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({

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