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