How to Get a React Component’s Element

By  on  

JSX is an amazing pseudo-language for React, and if I'm honest, it's what brought me to love React so much.  Using React without JSX is cumbersome and frustrating, while using JSX is such an easier way to express your code.  One drawback of JSX, however, is that it makes accessing component elements indirect, if not difficult.

The truth is that accessing a component's own elements is actually much easier than most think.  Let's look at how a component method can access its own DOM node with JavaScript:

Method 1:  react-dom

react-dom provides a findDomNode method for finding the component's node:

// Get ReactDOM
import ReactDOM from "react-dom";

// In your component method
class MyComponent extends Component {

    myMethod() {
        const node = ReactDOM.findDOMNode(this);
    }

}

With ReactDOM.findDOMNode(this), you can get the widget's main node, and from there you can use typical DOM methods:

const node = ReactDOM.findDOMNode(this);

// Get child nodes
if (node instanceof HTMLElement) {
    const child = node.querySelector('.someClass');
}

This mixes a bit of React and basic JavaScript DOM manipulation.

Method 2:  ref

Another method of getting DOM nodes is by using refs; an example usage is detailed in my React and autofocus post:

class MyComponent extends Component {

  // The element we want to retrieve
  _input: ?HTMLInputElement;

  // ....

  componentDidUpdate() {
    this._input.focus();
  }

  render() {
      return (
        <div>
            <input
              ref={c => (this._input = c)}
            />
        </div>
      );
    }
  }
}

Adding a ref attribute to the element you want a handle on is a more React-centric approach to getting a handle on an element.  Both strategies work well so choose whichever you prefer!

Recent Features

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Spyjax:  Ajax For Evil Using Dojo

    The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit. The HTML For the sake of this...

  • By
    MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

Discussion

  1. If you’re on React 16.3 and up best to use React.createRef() (https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)

  2. Rico

    There are new methods for creating a ref in React 16.3.

  3. Muhammad zubair

    i have a parent component in which two other components are defined .What i want is to access on component element in the second component to change it behavior.Help could be appreciated….

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!