forwardRef example - React Js

 App.js:

import React, {useRef} from "react";

import './App.css'

import Student  from "./Components/Student";

function App()

{

  let inputRef=useRef(null)

  function updateinput()

  {

    inputRef.current.value="3000"

    inputRef.current.style.color="red"

    inputRef.current.focus()

  }

return(

  <div>

    <h1>Forward Ref Tutorial</h1>

    <Student ref={inputRef}/>

   

    <button onClick={updateinput}>Update Inputbox</button>

  </div>

)

}

export default App;

-----------------------------------

Student.js:

import React,{forwardRef} from 'react'

function Student(props, ref) {

  return (

    <div>

        <h3>Student Component</h3>

        <input type="text" ref={ref}/>

    </div>

   

  )

}

export default forwardRef(Student);