How to get DOM element within React component?

Question

I'm rendering multiple of the same component, each with their own tooltip. Can I write code that will only look within the HTML of each component, so I'm not affecting all the other tooltips with the same class name? I'm using stateless components. Here is the code:

OptionsComponent.js:

import React from 'react';

const OptionsComponent = () => {
  const toggleTooltip = event => {
    document.getElementsByClassName('listings-table-options-tooltip').classList.toggle('tooltip-hide');
    event.stopPropagation();
  };
  return (
    <div className="inline-block">
        <span onClick={toggleTooltip} className="icon icon-options listings-table-options-icon"> </span>
        <div className="tooltip listings-table-options-tooltip">
            Tooltip content
        </div>
    </div>
  );
};

Backbone.js has something like this, allowing you to scope your document query to begin within the view element (analogous to a React component).

Answer 1

You should use refs.

Slightly modified from React docs:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    var underlyingDOMNode = this.textInput; // This is your DOM element
    underlyingDOMNode.focus();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in this.textInput.
    return (
      <div>
        <input
          type="text"
          ref={(input) => this.textInput = input} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

Answer 2

A comfortable approach would be modifying your toggleTooltip method this way:

...
  const toggleTooltip = event => {
      event.target.parentNode.querySelector('.tooltip').classList.toggle('tooltip-hide');
  };
...

I would however recommend having a state to represent the tooltip displaying or not.

Answer 3

With https://github.com/fckt/react-layer-stack you can do alike:

import React, { Component } from 'react';
import { Layer, LayerContext } from 'react-layer-stack';
import FixedLayer from './demo/components/FixedLayer';

class Demo extends Component {
  render() {
    return (
      <div>
        <Layer id="lightbox2">{ (_, content) =>
          <FixedLayer style={ { marginRight: '15px', marginBottom: '15px' } }>
            { content }
          </FixedLayer>
        }</Layer>

        <LayerContext id="lightbox2">{({ showMe, hideMe }) => (
            <button onMouseLeave={ hideMe } onMouseMove={ ({ pageX, pageY }) => {
              showMe(
                <div style={{
                      left: pageX, top: pageY + 20, position: "absolute",
                      padding: '10px',
                      background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: '5px',
                      boxShadow: '0px 0px 50px 0px rgba(0,0,0,0.60)'}}>
                   “There has to be message triage. If you say three things, you don’t say anything.”
                </div>)
            }}>Yet another button. Move your pointer to it.</button> )}
          </LayerContext>
      </div>
    )
  }
}