ML elements.
Arrow function concept provided by ES6.
Syntax of Javascript function:-
Old Style
function functionname()
{
}
Modern Style without Arrow
var x = function()
{
}
Modern Style With Arrow Function
var name = ()=>{
Code
}
Arrow Function Example With Class Component:-
import React from "react"
export class SIClass extends React.Component
{
constructor(props)
{
super(props)
this.state = {p:"",r:"",t:"",si:""}
}
enterP = (e) =>
{
this.setState({p:e.target.value})
}
enterR = (e) =>
{
this.setState({r:e.target.value})
}
enterT = (e) =>
{
this.setState({t:e.target.value})
}
calc = () =>
{
var res = (this.state.p*this.state.r*this.state.t)/100
this.setState({si:res})
}
render()
{
return (<div>
<input type="text" placeholder="Enter p" onChange={this.enterP} />
<br/>
<input type="text" placeholder="Enter r" onChange={this.enterR} />
<br/>
<input type="text" placeholder="Enter t" onChange={this.enterT} />
<br/>
<input type="button" value="Calculate" onClick={this.calc} />
<br/>
{this.state.si}
</div>)
}
}
Arrow Function Example With Functional Component:-
import { useState } from "react"
const SI = () =>
{
const[p,setP] = useState("")
const[r,setR] = useState("")
const[t,setT] = useState("")
const[si,setSi] = useState("")
var enterP = (e) =>
{
setP(e.target.value)
}
var enterR = (e) =>
{
setR(e.target.value)
}
var enterT = (e) =>
{
setT(e.target.value)
}
var calc = () =>
{
var res = (p*r*t)/100
setSi(res)
}
return (<div>
<input type="text" placeholder="Enter p" onChange={(e)=>enterP(e)} />
<br/>
<input type="text" placeholder="Enter r" onChange={enterR} />
<br/>
<input type="text" placeholder="Enter t" onChange={enterT} />
<br/>
<input type="button" value="Calculate" onClick={calc} />
<br/>
{si}
</div>)
}
export default SI;
Arrow Functional Example to check Prime using Functional Component:-
import { useState } from "react"
var CheckPrime=()=>
{
const[num,setNum] = useState(0)
const[res,setRes] = useState("")
var primeData=(e)=>{
setNum(e.target.value)
}
var clickprime=()=>{
var i;
for(i=2;i<num;i++)
{
if(num%i==0)
{
setRes("Not Prime")
break
}
}
if(num==i)
{
setRes("Prime")
}
}
return(
<div>
<input type="text" name="txtnum1" onChange={primeData} />
<br/>
<input type="button" name="btnclick" onClick={clickprime} value="Check Prime" />
<br />
{res}
</div>
)
}
export default CheckPrime;
Arrow Function Example to Check Prime Elements using Class Component:-
import React from "react"
export class CheckPrimeClass extends React.Component
{
constructor(props)
{
super(props)
this.state = {num:0,res:""}
}
primeData=(e)=>{
this.setState({num:e.target.value})
}
primeCheck=()=>{
var i;
for(i=2;i<this.state.num;i++)
{
if(this.state.num%i==0)
{
this.setState({res:"Not Prime"})
break
}
}
if(this.state.num==i)
{
this.setState({res:"Prime"})
}
}
render(){
return(
<div>
<input type="text" name="txtnum1" onChange={(e)=>this.primeData(e)} />
<br/>
<input type="button" name="btnclick" onClick={()=>this.primeCheck()} value="Check Prime" />
<br />
{this.state.res}
</div>
)
}
}
POST Answer of Questions and ASK to Doubt