How to pass refs from child to parent in reactjs?

Question

I want to focus the input box in my child component as soon as it renders and hence I am trying to pass ref of the input box up to its parent, which has a modal. And I am trying to focus on the input on entering the modal. (using the onEntered prop of react-bootstrap modal)

What am I using to create a modal? -> react-bootstrap

Parent Component's JSX:

        <Modal
            show={props.isLoginModalOpen}
            onHide={props.toggleLoginModal}
            onEntered={() => {                 //<----- I plan to use onEntered to focus on
             this.mobileInput.focus();         //       the input element in child 
             }}
        >
            <Modal.Header closeButton>
                <Modal.Title></Modal.Title>
            </Modal.Header>
            <Modal.Body>
                    
                        <EnterMobileView />   // <------- Child Component 

            </Modal.Body>
        </Modal>

Child Component's JSX:

<div>
            <Form>
                <div className='form-group'>
                    <input
                        type='number'
                        name='mobile'
                        placeholder='Phone Number'
                        className='form-control'
                        ref={(input) => (this.mobileInput = input)} // <---- I want to pass this
                    />                                              // ref up to the parent
                </div>
            </Form>
        </div>

Is this the correct way to do this? is there a better way?

[Did you look at this question?](https://stackoverflow.com/questions/42980402/react-passing-ref-from-dumb-componentchild-to-smart-componentparent) — Józef Podlecki, May 18 '20 at 20:51
@YevgenGorbunkov then how would I achieve focus on that input? — Vikrant Bhat, May 18 '20 at 21:11

score 3 · Answer 1 · answered May 19 '20 at 10:34

Please check this example. Hope it helps you.

MyParent Component

import React, {useRef} from "react";
import MyChild from "./MyChild";

export default function MyParent() {

    const inputRef = useRef();

    function handleClick(event) {
        inputRef.current.focus();
    }

    return(
        <div>
            <MyChild ref={inputRef}/>
            <button onClick={handleClick}>Focus on Child's Input</button>
        </div>
    );
}

MyChild Component

import React from "react";

const MyChild = React.forwardRef((props, ref) => {

    return(
        <div>
            <input ref={ref}/>
        </div>
    );
});
export default MyChild;

score 1 · Answer 2 · answered Jul 13 '22 at 11:53

Parent Component

import React,{useRef} from "react";
import Child from "./Child";

const Parent = () => {
    
  const childRef = useRef();

  const handleColorChange = ()=>{
    console.log("changing color","event envoked from Child.js")
    childRef.current.style.color = "#00ff00"
  }

  return (
    <>
      <h3>Parent Component</h3>
      <h1 ref={childRef} >Change Text Color</h1>
      <h4>-----------------------------------------------------------</h4>
    <Child handleColorChange={handleColorChange} />
    </>
  );
};
export default Parent;

Child Component

import React from "react";

const Child = ({handleColorChange}) => {

    console.log("rendereing child...........")

  return (
    <>
      <h3>Child Component</h3>
      <button 
        onClick={handleColorChange}
      >
        Change Color
      </button>
    </>
  );
};
export default Child;

We can invoke the click event from the child component by passing the handleColorChange() function as a prop & pass it into the onClick event of button of child component.

score 0 · Answer 3 · answered May 18 '20 at 20:56

0

Looks like you need a ref forwarding here : https://en.reactjs.org/docs/forwarding-refs.html

The idea is to create the constant that holds the ref in the parent component, then pass this constant as prop to the Child component, which will use attach it to whatever element you want.

I you need more help to implement it, just let me know in a comment.

answered May 18 '20 at 20:56

aquinq

1,318
7
18

Hey @aquinq, that will be awesome! would like your like help on this – Vikrant Bhat May 18 '20 at 21:10
In parent component, you need to declare a const for your ref : `const inputRef = React.createRef();` – aquinq May 18 '20 at 21:18
Then, pass it to `EnterMobileView` through props : `` – aquinq May 18 '20 at 21:19
Then, create your child component using `React.forwardRef ` method to separate ref from other props : `const Child = React.forwardRef((props, ref) => ( ...` – aquinq May 18 '20 at 21:21
should I convert my component into a class component? – Vikrant Bhat May 18 '20 at 21:22
Finally, pass `ref` to your input's props : `` – aquinq May 18 '20 at 21:22
I am sorry, I have lost track In you explanation. Can you possibly explain in one codeblock? You can answer in StackOverflow. Check below this for a answer button/ box – Vikrant Bhat May 18 '20 at 21:24

How to pass refs from child to parent in reactjs?

Parent Component's JSX:

Child Component's JSX:

3 Answers3