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
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    Duplicate the jQuery Homepage Tooltips

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: The amount of jQuery required to duplicate this effect is next to nothing;  in fact, there's more CSS than there is jQuery code!  Let's explore how we can duplicate jQuery's tooltip effect. The HTML The overall...

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

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.

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