Krishan Dev Personal Blog

 App.js: import React , { useRef , useState } from "react" ; import './App.css' function App () { return (   <div className = "App" >     <h1> HOC </h1>     < HOCRed cmp = { Counter } />     < HOCGreen cmp = { Counter } />     < HOCBlue cmp = { Counter } />   </div> ) } function HOCRed ( props ) {   return <h2 style = { { backgroundColor : 'red' , width : 200 } } > Red < props.cmp /></h2> } function HOCGreen ( props ) {   return <h2 style = { { backgroundColor : 'green' , width : 200 } } > Green < props.cmp /></h2> } function HOCBlue ( props ) {   return <h2 style = { { backgroundColor : 'blue' , width : 200 } } > Blue < props.cmp /></h2> } function Counter () {   const [ count , setCount ]= useState ( 0 )   return <div>             <h3> { count } </h3>     <button onClick = { () => setCount

 App.js: import React , { useRef } from "react" ; import './App.css' function App () {   let inputRef = useRef ( null )   let inputRef2 = useRef ( null )   function formHandle ( e )   {     e . preventDefault ()     console . warn ( "Value of Field 1 :" , inputRef . current . value )     console . warn ( "Value of Text Field 2" , inputRef2 . current . value )     let input3 = document . getElementById ( 'input3' ). value     console . warn ( "Input field 3 value : " , input3 )   } return (   <div className = "App" >     <h1> UnControlled Component </h1>     <form onSubmit = { formHandle } >       <input type = "text" ref = { inputRef } /> <br/><br/>       <input type = "text" ref = { inputRef2 } /><br/> <br/>       <input type = "text" id = "input3" /><br/> <br/>       <button> S

 App.js: import React , { useState } from "react" ; import './App.css' function App () {   const [ val , setVal ]= useState ( "" ); return (   <div>     <h1> Controlled Component </h1>     <input type = "text" value = { val } onChange = { ( e ) => setVal ( e . target . value ) } />     <h3> Text Value : { val } </h3>   </div> ) } export default App ;