accessing-a-child-component.md

id	sidebar_label	title	description	keywords	version	image
accessing-a-child-component	Accessing a child component	Accessing a Child Component	Accessing a child component | React Patterns, techniques, tips and tricks in development for React developers.	accessing a child component accessingachildcomponent statelessfunction presentational component presentationalcomponent reactpatterns react patterns reactjspatterns reactjs patterns react reactjs react techniques react tips and tricks	Accessing a child component	/img/reactpatterns-cover.png

React provide a way to access to a child's DOM node from a parent component by using Refs.

For examples:

Assume that you want to put the cursor in the user name fields when the page render.

In child component, we create Refs by using React.createRef() and then attached to React elements via the ref attribute.

import React from 'react'

class Input extends React.Component {
  constructor(props) {
    super(props)
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef()
  }

  focus() {
    // EXPLANATION: a reference to the node becomes accessible at the current attribute of the ref.
    // make the DOM node focus
    this.textInput.current.focus();
  }
  
  render() {
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    )
  }
}

In the parent component, we can get a reference to the Input component and call its focus() method.

class SignInModal extends React.Component {
  componentDidMount() {
    // NOTE: when you use ref on a component, it's a reference to 
    // the component (not the underlying element), so you have access to its methods.
    this.InputComponent.focus();
  }
  
  render() {
    return (
      <div>
        <label>User name: </label>
        {/* we use "callback refs" to get the React component instance */}
        <Input ref={component => {this.InputComponent = component }} />
      </div>
    )
  }
}