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"

 Program to calculate Area of rectangle:-


import { useState } from "react";




function Reactarea()

{

    let [w,setW] = useState(0);

    let [l,setL] = useState(0);

    let [a,setA] = useState(0);

    function setWidth(e)

    {

        setW(e.target.value);

    }

    function setLength(e)

    {

        setL(e.target.value);

    }

    function rarea(e)

    {

        setA(w*l);

        e.preventDefault();

    }

    return(

        <div>

         <form onSubmit={rarea}>

             <input type="text" onChange={(e) => setWidth(e)} />

             <br/>

             <input type="text" onChange={(e) => setLength(e)} />

             <br/>

             <input type="submit" value="Calculate" /> 


         </form>

          <p>{a}</p>

        </div>

   );

}

export default Reactarea;

Example of Checkbox


import React from "react";

export class CheckboxExample extends React.Component

{

  

    constructor(props)

    {

       

        super(props);

        

        this.state = {fee1:0,fees2:0,fees3:0,fee:0,c1:'',c2:'',c3:'',c:''};

       

        this.checkC = this.checkC.bind(this);

        this.checkCPP = this.checkCPP.bind(this);

        this.checkDs= this.checkDs.bind(this);

        this.calc = this.calc.bind(this);

    }

    

    

     checkC(event)

     {

     

        if(event.target.checked)

        {

        this.setState({fee1:event.target.value});

        this.setState({c1:event.target.name});

        }

        else

        {

            this.setState({fee1:0});

            this.setState({c1:""});


        }

        

     }

     checkCPP(event)

     {

        if(event.target.checked)

        {

        this.setState({fees2:event.target.value})

        this.setState({c2:event.target.name})

       }

       else

       {

        this.setState({fees2:0});

        this.setState({c2:""});


        }

      

     }

     checkDs(event)

     {

        if(event.target.checked)

        {

        this.setState({fees3:event.target.value})

        this.setState({c3:event.target.name})

       }

       else

       {

         this.setState({fees3:0});

         this.setState({c3:""});


       }

        

     }

     calc(event)

     {

     this.setState({fee:parseInt(this.state.fee1)+parseInt(this.state.fees2)+parseInt(this.state.fees3)});

     this.setState({c:this.state.c1+ " "+this.state.c2+ " " +this.state.c3});

     event.preventDefault();

    }

    render()

    {

      

        return(

            <div>

                <form>

                    <input type="checkbox" name="C" value="1000" onChange={this.checkC}   />C<br/>

                    <input type="checkbox" name="CPP" value="2000" onChange={this.checkCPP}  />CPP<br/>

                    <input type="checkbox" name="DS" value="3000" onChange={this.checkDs}  />DS<br/>

                    <br></br>

                   

                    <input type="submit" name="btnsubmit" value="Calculate" onClick={this.calc}/>

                </form>

                <div>Courses are {this.state.c} Fees are:- {this.state.fee}</div>

            </div>

        );

    }

}



Listbox and Dropdownlist example:-


import React from "react";

export class CheckboxExample extends React.Component

{

  

    constructor(props)

    {

       

        super(props);

        

        this.state = {c1:'',c2:'',c:'',l:''};

        this.ddl = this.ddl.bind(this);

        this.lst = this.lst.bind(this);

        this.calc = this.calc.bind(this);

      

    }

    

    

     

     calc(event)

     {

  

     this.setState({c:this.state.c1+ " "+this.state.l});

     event.preventDefault();

    }

    ddl(event)

    {

      

        this.setState({c1:event.target.value})

       

    }

    lst(event)

    {

        var s = "";

       // alert(event.target.options[0].selected);

        for(var i=0;i<event.target.length;i++)

        {

            if(event.target.options[i].selected)

            {

                s = s + event.target.options[i].value;

            }

        }

        this.setState({l:s})

       

    }

    render()

    {

      

        return(

            <div>

                <form>

                    <select onChange={this.ddl}>

                        <option value="C:1000">C</option>

                        <option value="CPP:2000">CPP</option>

                        <option value="DS:3000">DS</option>

                    </select>

                    <br/>

                    <br/>

                    <select onChange={this.lst} multiple>

                        <option value="C:1000">C</option>

                        <option value="CPP:2000">CPP</option>

                        <option value="DS:3000">DS</option>

                    </select>

                    <br></br>

                  

                    <br></br>

                   

                    <input type="submit" name="btnsubmit" value="Calculate" onClick={this.calc}/>

                </form>

                <div>Courses are {this.state.c} </div>

            </div>

        );

    }

}


Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post