ClipboardJS with React, using document.getElementById()
<p>Originally, I had it working fine.</p>

<p>Then I did this and now I can't get it to work</p>

<p><strong>ClipboardField.js</strong></p>

<pre><code>import React from 'react';

export default (props) =&gt; {

  return(
    &lt;div id="clip" data-clipboard-text={props.code} onClick={props.onClick}&gt;
      &lt;p&gt; Copy to clipboard.&lt;/p&gt;
    &lt;/div&gt;
  );
}
</code></pre>

<p><strong>Field.js</strong></p>

<pre><code>class DashWizardTwoCore extends Component {

  componentDidMount(){
    const btns = document.getElementById('clip');
    const clipboard = new Clipboard(btns);
  }

  componentDidUpdate() {
    clipboard.on('success', function(e) {
      console.log(e);
    });
    clipboard.on('error', function(e) {
      console.log(e);
    });
  }


  render(){

    const someCode = "const foo = 1"

    return (
      &lt;div&gt;
        &lt;ClipboardField code={this.someCode} /&gt; }
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>If you take the code out of <strong>ClipboardField</strong> and into <strong>Field</strong> it works. It's mostly, how do I use document.getElementById() in my parent component to find something in my child?</p>

<p>Their examples:</p>

<p><a href="https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18" rel="nofollow">https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18</a></p>

<p><a href="https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17" rel="nofollow">https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17</a></p>

<p><a href="https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19" rel="nofollow">https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19</a></p>