Controlled Class Component and Functional Component Syntax with Arrow Function Style

 

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>

        )

        }

}