Forwarding Refs in React

In this article, we are going to learn about forwarding refs in React JS. forwarding refs in react is a technique for automatically passing refs through a component to one of its children. The below concept is the best example to understand how it works.

FRInput file:

const FRInput = ()=>{
    return(
        <div>
            <input type="text"/>
        </div>
    )
}

FRParentIntput:

class FRParentInput extends Component {
 
  render(){
      return( 
          <div>
            <FRInput/>
              <button>Focus Input</button>
          </div> 
      )
  }
}

1. In the above code, we have created a file called FRIntput; within that file, we created the FRInput() functional component, which returns <input> text element.
2. Then we created another file called FRParentIntput and within that file, we created FRParentIntput() class component. In the JSX we simply added <FRIntput/> component and <button> tag that say “Focus Input”.We rendered <FRParentIntput/> in the App.js file.
3. If we save all the files and see the output below: You should be able to see the input and the button.

When we click on the button and the parent component input the child component should receive focus. However, We can use the forwarding ref technique to allow the parent component to directly refer to the native input element. Now, we have Three simple steps:

Create Forward Ref

1. Create a ref and the parent component.

class FRParentInput extends Component {
  constructor(props){
    super(props)
    this.inputRef = React.createRef()
  }
  render(){
      return( 
          <div>
            <FRInput ref={this.inputRef}/>
              <button onClick={this.clickHandler}>Focus Input</button>
          </div> 
      )
  }
}

1. Here, we edited the FRParentInput class component. We added a constructor and inside it, we assigned this.inputRef to React.createRef().
2. Then we attached the Ref to the child component using the ref attribute. So, on the FRInput component, we set ref as equal to {this.inputRef}.
3. The clickHandler function is defined in the 3 steps.

2. We need to forward this.ref to the input element in the child component.

const FRInput = React.forwardRef((props, ref)=>{
    return(
        <div>
            <input type="text" ref={ref} />
        </div>
    )
})

1. ref forwarding can be achieved using the forward ref method from the react library.
2. To forward a ref, we will use the React. forwardRef() method. The method is assigned to the constant. This method takes in a component as its parameter. Since we already have the functional component, we can get past it inside the parenthesis of React. forwardRef() method as in the above code.
3. So, the arrow function is passed as a parameter to forwardRef() method. We know that every functional component receives props as its parameter but when a component is passed as a parameter to createRef() method, it receives the Ref attribute as its second parameter.
4. We can use ref parameter and pass it as a value to Ref attribute on the native input element. So, on the <input> element ref attribute assign the value of ref parameter. This Ref parameter will point to the value of the Ref attribute from the parent component. In other words, the ref is being forwarded from the parent component to the native input element.

3. Define the clickhandler in parent component:

clickHandler = () =>{
  this.inputRef.current.focus()
}

1. In the above code, we have created the clickHandler function component inside the FRParentInput parent component.
2. Within the function of the body, we use “this.inputRef.current.focus()” because we are using forwardRef technique, so the ‘Ref.current’ points to the native <input> element.
3. Now, see the output and then click on the button ‘Focus Input’. See the output image below, the input element receives the focus.