Controlled Component Example in react js, Checkbox, Listbox, Dropdownlist, Readiobutton example in react-js

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 Radio button under functional component:

import { useState } from "react";
function RadioExample()

{
    const[course,setCourse]=useState(undefined)

    const[res,setRes] = useState(undefined)
    function displayCourse(e)

    {
        setRes(course)

        e.preventDefault()
    }

    return(<div>
        <form>

            <p>Select Course</p>
            <input type="radio" name="course" value="MERN STACK" onChange={(e)=>setCourse(e.target.value)} />MERN

            <br/>
            <input type="radio" name="course" value="MEAN STACK" onChange={(e)=>setCourse(e.target.value)}  />MEAN

            <br/>
            <input type="radio" name="course" value="JAVA FULL STACK" onChange={(e)=>setCourse(e.target.value)}  />JAVA FULL STACK

            <br/>
            <input type="submit" value="submit" onClick={displayCourse} />

        </form>
        {res}

    </div>)
}

export default RadioExample;


Example of Checkbox under functional component:

import { useState } from "react";
function CheckboxExample()

{
    const[course,setCourse]=useState([])

    const[res,setRes] = useState(undefined)
    function handleCheckboxChange(e)

    {
        if(e.target.checked)

        {
            setCourse([...course,e.target.value])

        }
        else

        {
            setCourse(course.filter((item) => item !== e.target.value));

        }
    }

    function displayCourse(e)
    {

        setRes(course)
        e.preventDefault()

    }
   

    return(<div>
        <form>

            <p>Select Course</p>
            <input type="checkbox" name="course" value="MERN STACK" onChange={handleCheckboxChange} />MERN

            <br/>
            <input type="checkbox" name="course" value="MEAN STACK" onChange={handleCheckboxChange}  />MEAN

            <br/>
            <input type="checkbox" name="course" value="JAVA FULL STACK" onChange={handleCheckboxChange}  />JAVA FULL STACK

            <br/>
            <input type="submit" value="submit" onClick={displayCourse} />

        </form>
        {res}

    </div>)
}

export default CheckboxExample;

Example of dropdownlist under functional component:

import { useState } from "react";
function DropdownList()

{
    const[course,setCourse]=useState(undefined)

    const[res,setRes] = useState(undefined)
    function displayCourse(e)

    {
        setRes(course)

        e.preventDefault()
    }

    return(<div>
        <form>

            <p>Select Course</p>
            <select name="course" onChange={(e)=>setCourse(e.target.value)}>

                <option value="">Select Course</option>
                <option value="C">C</option>

                <option value="CPP">CPP</option>
                <option value="DS">DS</option>

                <option value="JAVA">JAVA</option>
                <option value="PHP">PHP</option>

            </select>
            <br/>

            <input type="submit" value="submit" onClick={displayCourse} />
        </form>

        {res}
    </div>)

}
export default DropdownList;

Example of listbox under functional component:


import { useState } from "react";

function Listbox()
{

    const[course,setCourse]=useState([])
    const[res,setRes] = useState(undefined)

    function handleListItem(e)
    {

        const selectedOptions = Array.from(e.target.selectedOptions, option => option.value);
        setCourse(selectedOptions)

    }
    function displayCourse(e)

    {
        setRes(course.join(','))

        e.preventDefault()
    }

   
    return(<div>

        <form>
            <p>Select Course</p>

            <select name="course" onChange={handleListItem} multiple>
             

                <option value="C">C</option>
                <option value="CPP">CPP</option>

                <option value="DS">DS</option>
                <option value="JAVA">JAVA</option>

                <option value="PHP">PHP</option>
            </select>

            <br/>
            <input type="submit" value="submit" onClick={displayCourse} />

        </form>

        {res}

    </div>)

}

export default Listbox;

Example of Dropdownlist to bind items using Object:

import { useState } from "react";

function DropdownList()

{

    const[course,setCourse]=useState(undefined)

    const[res,setRes] = useState(undefined)

    const arr = {1:"C",2:"C++",3:"DS",4:"JAVA",5:"PHP",6:"PYTHON",7:"Android",8:"iOS"}

    function displayCourse(e)

    {

        setRes(course)

        e.preventDefault()

    }

    return(<div>

        <form>

            <p>Select Course</p>

            <select name="course" onChange={(e)=>setCourse(e.target.value)}>

                <option value="">Select Course</option>

               {Object.entries(arr).map(([key, value])=>

(<option value={key}>{value}</option>))}

            </select>

            <br/>

            <input type="submit" value="submit" onClick={displayCourse} />

        </form>

        {res}

    </div>)

}

export default DropdownList;

Example of Listbox to bind data using Array:

import { useState } from "react";

function Listbox()

{

    const[course,setCourse]=useState([])

    const[res,setRes] = useState(undefined)

    const arr = ["C","C++","DS","JAVA","PHP","PYTHON","Android","iOS"]

    function handleListItem(e)

    {

        const selectedOptions =

Array.from(e.target.selectedOptions, option => option.value);

        setCourse(selectedOptions)

    }

    function displayCourse(e)

    {

        setRes(course.join(','))

        e.preventDefault()

    }

   

    return(<div>

        <form>

            <p>Select Course</p>

            <select name="course" onChange={handleListItem} multiple>

             {arr.map(item=>(<option value={item}>{item}</option>))}

            </select>

            <br/>

            <input type="submit" value="submit" onClick={displayCourse} />

        </form>

        {res && <div>Result is {res}</div>}

    </div>)

}

export default Listbox;

Class Component Example:-

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>

        );

    }

}