Uncontrolled Functional Component with RadioButton, ListBox, DropdownList and Checkbox

 Uncontrolled Functional Component with RadioButton, ListBox, DropdownList and Checkbox:

Example of RadioButton:

import { useRef,useState } from "react";

function RadioExampleNew()

{

    const course1 =useRef()

    const course2 =useRef()

    const course3 =useRef()

    const[res,setRes] = useState(undefined)

    function displayCourse(e)

    {

        if(course1.current.checked)

        {

            setRes(course1.current.value)

        }

        else  if(course2.current.checked)

            {

                setRes(course2.current.value)

            }

            else

            {

                setRes(course3.current.value)

            }

        e.preventDefault()

    }

    return(<div>

        <form>

            <p>Select Course</p>

            <input type="radio" name="course" value="MERN STACK" ref={course1} />MERN

            <br/>

            <input type="radio" name="course" value="MEAN STACK" ref={course2} />MEAN

            <br/>

            <input type="radio" name="course" value="JAVA FULL STACK" ref={course3} />

JAVA FULL STACK

            <br/>

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

        </form>

        {res}

    </div>)

}

export default RadioExampleNew;

Example of Listbox:

import { useRef } from "react";

function DropdownList()

{

    const sel = useRef([])

    function fun(e)

    {

        let course1="";

        console.log(sel.current.selectedOptions)

        const selectedOptions = Array.from(sel.current.selectedOptions,

            option => option.value);

        alert(selectedOptions)

       e.preventDefault()

    }

    return(<div>

        <form onSubmit={fun}>

            <select  ref={sel} multiple>

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

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

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

                <option value="REACT">REACT</option>

            </select>

            <br/>

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

        </form>

    </div>)

}

export default DropdownList;

Another Example of Listbox:

import { useRef,useState } from "react";

function Listboxnew()

{

    const course=useRef([])

    const[res,setRes] = useState(undefined)

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

   

    function displayCourse(e)

    {

        const selectedOptions = Array.from(course.current.selectedOptions,

option => option.value);

        setRes(selectedOptions.join(','))

        e.preventDefault()

    }

   

    return(<div>

        <form>

            <p>Select Course</p>

            <select name="course" ref={course}  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 Listboxnew;

Example of checkbox:

import { useRef } from "react";

function CheckboxExample()

{

   const chk1 = useRef()

   const chk2 = useRef()

   const chk3 = useRef()

   function selectCourse(e)

   {

    let course1="",course2="",course3=""

    if(chk1.current.checked){

        course1=chk1.current.value

    }

    else

    {

        course1=' '

    }

    if(chk2.current.checked){

        course2=chk2.current.value

    }

    else

    {

        course2=' '

    }

    if(chk3.current.checked){

        course3=chk3.current.value

    }

    else

    {

        course3=' '

    }

    alert("selected course is "+(course1+ " " +course2+ " " +course3))

    e.preventDefault()

   }

    return (<div>

       <form onSubmit={selectCourse}>

        <input type="checkbox" value="C" ref={chk1}/>C <br/>

        <input type="checkbox" value="CPP" ref={chk2} />CPP <br/>

        <input type="checkbox" value="DS" ref={chk3} />DS <br/>

        <input type="submit" name="btnsubmit" value="Select Course" />

       </form>

    </div>)

}

export default CheckboxExample;

Optimize code of Checkbox:

import { useRef } from "react";

function CheckboxExample()

{

   const chk = useRef([])

 

   function selectCourse(e)

   {

 

    let course1="";

 

    for (let index in chk.current) {

      if (chk.current[index].checked) {

        course1 += chk.current[index].value + " ";

      }

    }

    alert("Selected course(s): " + course1);

    e.preventDefault();

   }

    return (<div>

       <form onSubmit={selectCourse}>

        <input type="checkbox" value="C"  ref={(el) => (chk.current[0] = el)}/>C <br/>

        <input type="checkbox" value="CPP"  ref={(el) => (chk.current[1] = el)} />CPP <br/>

        <input type="checkbox" value="DS"  ref={(el) => (chk.current[2] = el)} />DS <br/>

        <input type="submit" name="btnsubmit" value="Select Course" />

       </form>

    </div>)

}

export default CheckboxExample;

Code of DropdownList:

import { useRef } from "react";

function DropdownList()

{

    const sel = useRef()

    function fun(e)

    {

       alert(sel.current.value)

       e.preventDefault()

    }

    return(<div>

        <form onSubmit={fun}>

            <select  ref={sel}>

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

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

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

                <option value="REACT">REACT</option>

            </select>

            <br/>

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

        </form>

    </div>)

}

export default DropdownList;

Create Dynamic Dropdown List:

import { useRef } from "react";

function DropdownList()

{

    const sel = useRef([])

    const items = ['C', 'C++', 'DS','JAVA','PHP','iOS','Android'];

    const startYear = 1990;

    const endYear = 2050;

    const years = [];

 

    for (let year = startYear; year <= endYear; year++) {

      years.push(year);

    }

    function fun(e)

    {

        let course1="";

        console.log(sel.current.selectedOptions)

        const selectedOptions = Array.from(sel.current.selectedOptions,

            option => option.value);

        alert(selectedOptions)

        e.preventDefault()

    }

    return(<div>

        <form onSubmit={fun}>

            <select  ref={sel} multiple>

            {items.map((item, index) => (

                      <option key={index}>{item}</option>

            ))}

            </select>

            <br/>

            <select>

            {years.map((item, index) => (

                      <option key={index}>{item}</option>

            ))}

            </select>

            <br/>

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

        </form>

    </div>)

}

export default DropdownList;

Radio button example to Change Background-color:

import { useRef, useState } from "react"

function ChangebgColor()

{

    const rb = useRef()

    const rb1 = useRef()

    const rb2 = useRef()

    const [c,setC] = useState()

    function changeColor()

    {

        if(rb.current.checked)

             setC(rb.current.value)

        else if(rb1.current.checked)

            setC(rb1.current.value)

        else

            setC(rb2.current.value)

    }

    return(<div style={{'backgroundColor':c,width:"1500px",height:"800px"}}>

        <input type="radio" name="color" ref={rb} value="Red" onClick={changeColor} />RED

        <br/>

        <input type="radio"  name="color" ref={rb1} value="Green" onClick={changeColor} />Green

        <br />

        <input type="radio"  name="color" ref={rb2} value="Blue" onClick={changeColor} />Blue

        </div>)

}

export default ChangebgColor;

Example of Addition with Multiple Textfield:

import { useRef, useState } from "react"

function Addition()

{

    const txt1ref = useRef()  //hook

    const txt2ref = useRef()  //hook

   

    const[res,setRes]= useState(undefined) //state

    function calc(ope,e)

    {

       

        let num1 = txt1ref.current.value

        let num2 = txt2ref.current.value

        var num3;

        switch(ope)

        {

            case '+':

                num3 = parseInt(num1)+parseInt(num2)

                break

            case '-':

                num3 = parseInt(num1)-parseInt(num2)

                break

            case '*':

                num3 = parseInt(num1)*parseInt(num2)

                break

            case '/':

                num3 = parseInt(num1)/parseInt(num2)

                break

            default:

               break;        

            }

       

        setRes(`result is ${num3}`)

        e.preventDefault()

    }

   

   return(<div>

    <form>

        <input type="text" ref={txt1ref} placeholder="Enter First Number" /> <br/>

        <input type="text" ref={txt2ref} placeholder="Enter Second Number" /> <br/>

        <input type="submit" onClick={(e)=>calc("+",e)} value="Addition" />

        <input type="submit"  onClick={(e)=>calc("-",e)} value="Substraction" />

        <input type="submit"  onClick={(e)=>calc("*",e)} value="Multiplication" />

        <input type="submit"  onClick={(e)=>calc("/",e)} value="Division" />

    </form>

      {res}

   </div>)

}

export default Addition;