How do I access refs of a child component in the parent component

Question

If I have something like   lt Parent gt     lt Child1   gt     lt Child2   gt     lt Child3   gt   lt  Parent gt    And I want to access from Child2 where I have refs  child2refs   how can I do that

User · Answer

First of all  I want to say a big screw you to React for designing an interface that doesn t let us access  ref  on the instantiated child components  in whatever context  without having to use the  forwardRef   quot hack quot   which technically only works on specific single instances  and not dynamic collections   Thanks for making our lives harder with your proprietary hook crap and now forcing us to use functional components  which can t inherit base functionality without more hacks   Why did JavaScript add class support to begin with  Right    With that said  here is how I solve the problem for dynamic components  On the parent  dynamically create references to the child components  for example  class Form extends Component       fieldRefs           componentWillMount        gt            this fieldRefs               for let f of this props children                if  f  amp  amp  f type name     FormField                     f ref   createRef                    this fieldRefs push f                                      public getFields        gt            let data                for let r of this fieldRefs                let f   r ref current              data f props id    f field current value                     return data           The Child component  ie  lt FormField   gt   implements it s own  field  ref  to be referred to from the parent  class FormField extends Component       field   createRef             render             return               lt input ref  this field  type  type    gt                      Then in your main page   quot Parent Parent quot  component  you can get the field values from the reference with  class Page extends Component       form   createRef         onSubmit        gt            let fields   this form current getFields               render             return                lt Form ref  this form  gt                   lt FormField id  quot email quot  type  quot email quot  autoComplete  quot email quot  label  quot E-mail quot    gt                   lt FormField id  quot password quot  type  quot password quot  autoComplete  quot password quot  label  quot Password quot    gt                    lt div class  quot button quot  onClick  this onSubmit  gt Submit lt  div gt               lt  Form gt                      I implemented this because I wanted to encapsulate all generic form functionality from a main  lt Form   gt  component  and the only way to be able to have the main client page component set and style its own inner components was to use child components  ie   lt FormField   gt  items within the parent  lt Form   gt   which is inside some other  lt Page   gt  component   So  while some might consider this a hack  it s just as hackey as React s attempts to block the actual  ref  from any parent  which I think is a ridiculous design  however they want to rationalize it  Also wtf SO  It s 2021 and we still don t have get proper code-editing tools in your editor  Ffs

User · Answer

I think this guide explains it pretty well https   github com yannickcr eslint-plugin-react issues 678  class Field extends Component     const   inputRef     this props    render         return          lt input type  text  ref  inputRef    gt               class MyComponent extends Component     componentDidMount         this inputNode focus           render         return          lt div gt          Hello   lt Field inputRef  node   gt  this inputNode   node    gt         lt  div gt

User · Answer

Recommended for React versions prior to 16 3  If it cannot be avoided the suggested pattern extracted from the React docs would be   import React    Component   from  react    const Child      setRef      gt   lt input type  text  ref  setRef    gt    class Parent extends Component       constructor props            super props           this setRef   this setRef bind this              componentDidMount                Calling a function on the Child DOM element         this childRef focus               setRef input            this childRef   input             render             return  lt Child setRef  this setRef    gt            The Parent forwards a function as prop bound to Parent s this  When React calls the Child s ref prop setRef it will assign the Child s ref to the Parent s childRef property   Recommended for React    16 3  Ref forwarding is an opt-in feature that lets some components take a ref they receive  and pass it further down  in other words     forward    it  to a child   We create Components that forward their ref with React forwardRef  The returned Component ref prop must be of the same type as the return type of React createRef  Whenever React mounts the DOM node then  property current of the ref created with React createRef will point to the underlying DOM node   import React from  react    const LibraryButton   React forwardRef  props  ref    gt       lt button ref  ref      props  gt      FancyButton    lt  button gt       class AutoFocus extends React Component     constructor props        super props       this childRef   React createRef        this onClick   this onClick bind this          componentDidMount         this childRef current focus           onClick         console log  fancy            render         return  lt LibraryButton onClick  this onClick  ref  this childRef    gt           Forwarding refs HOC example  Created Components are forwarding their ref to a child node   function logProps Component      class LogProps extends React Component       componentDidUpdate prevProps          console log  old props    prevProps         console log  new props    this props              render           const  forwardedRef     rest    this props            Assign the custom prop  forwardedRef  as a ref       return  lt Component ref  forwardedRef      rest    gt                   Note the second param  ref  provided by React forwardRef       We can pass it along to LogProps as a regular prop  e g   forwardedRef       And it can then be attached to the Component    return React forwardRef  props  ref    gt        return  lt LogProps     props  forwardedRef  ref    gt             See Forwarding Refs in React docs

User · Answer

Here is an example that will focus on an input using refs  tested in React 16 8 6    The Child component   class Child extends React Component     constructor props        super props       this myRef   React createRef          render         return   lt input type  text  ref  this myRef    gt            The Parent component with the Child component inside   class Parent extends React Component     constructor props        super props       this childRef   React createRef          componentDidMount         this childRef current myRef current focus          render         return  lt Child ref  this childRef    gt          ReactDOM render       lt Parent   gt       document getElementById  container        The Parent component with this props children   class Parent extends React Component       constructor props            super props           this childRef   React createRef              componentDidMount             this childRef current myRef current focus              render             const ChildComponentWithRef   React forwardRef  props  ref    gt              React cloneElement this props children                       props                  ref                                   return  lt ChildComponentWithRef ref  this childRef    gt           ReactDOM render       lt Parent gt           lt Child   gt       lt  Parent gt       document getElementById  container

User · Answer

Using Ref forwarding you can pass the ref from parent to further down to a child   const FancyButton   React forwardRef  props  ref    gt       lt button ref  ref  className  FancyButton  gt       props children     lt  button gt          You can now get a ref directly to the DOM button  const ref   React createRef     lt FancyButton ref  ref  gt Click me  lt  FancyButton gt      Create a React ref by calling React createRef and assign it to a ref variable  Pass your ref down to  by specifying it as a JSX attribute  React passes the ref to the  props  ref         function inside forwardRef as a second argument  Forward this ref argument down to  by specifying it as a JSX attribute  When the ref is attached  ref current will point to the  DOM node    Note The second ref argument only exists when you define a component with React forwardRef call  Regular functional or class components don   t receive the ref argument  and ref is not available in props either   Ref forwarding is not limited to DOM components  You can forward refs to class component instances  too   Reference  React Documentation

User · Answer

Inside the child component add a ref to the node you need   Inside the parent component add a ref to the child component         Child component    class Child extends React Component     render         return          lt div id  child  gt           lt h1 ref   node    gt    this heading   node     gt            Child          lt  h1 gt         lt  div gt                      Parent component     class Parent extends React Component     componentDidMount            Access child component refs via parent component instance like this     console log this child heading getDOMNode            render         return          lt div gt           lt Child           ref   node    gt    this child   node               gt         lt  div gt                 Demo  https   codepen io itsfadnis pen aLWVVx editors 0011

User · Answer

First access the children with  this props children  each child will then have its ref as a property on it

[reactjs] How do I access refs of a child component in the parent component

Examples related to reactjs