Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 Class Component and Functional Component Syntax with Arrow Function Style:-

Arrow Function is a shortcut approach to declare the function that can be easily bound with HTML 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 a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post