title: How to Copy to clipboard in React JS
body: <p><em>Noob Alert</em></p>
  
  <p>I was trying to copy the displayed <code>&lt;this.state.response&gt;</code> which is inside an <code>&lt;h1&gt;</code>. The <code>&lt;p&gt;</code> tag should act as the copy button for which I would like to give the copy action. I tried using <code>react-copy-to-clipboard</code> package but failed as I already have some states defined in my code.</p>
  
  <pre><code>&lt;div&gt;
      //content to be copied
              &lt;h1 id="copy" className="password-display"&gt; {this.state.response}&lt;/h1&gt;
       //acts as the copy button
              &lt;p className="copy-clipboard"&gt;Copy to clipboard&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Home.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Container, Row, Col, ButtonGroup, Button } from "reactstrap";
  import {CopyToClipboard} from 'react-copy-to-clipboard';
  import Header from "./Header.js";
  import Footer from "./Footer.js";
  
  import "./Home.css";
  
  
  export default class Home extends Component {
    state = {
  
      response: ''
    };
  
  
    componentDidMount() {
      this.callApi()
        .then(res =&gt; this.setState({ response: res.chunk }))
        .catch(err =&gt; console.log(err));
    }
  
  
  
    callApi = async () =&gt; {
      const response = await fetch('/password-api');
      const body = await response.json();
  
      if (response.status !== 200) throw Error(body.message);
  
      return body;
    };
  
    handleClick = async () =&gt; {
      await this.callApi()
         .then(res =&gt; this.setState({ response: res.chunk }))
   };
  
    
    render() {
      return (
        &lt;div className="App-header"&gt;
          &lt;Header /&gt;
  
          &lt;Container&gt;
            &lt;Row&gt;
              &lt;Col sm="12" md={{ size: 8, offset: 2 }}&gt;
            &lt;div&gt;
                  &lt;h1 id="copy" className="password-display"&gt; {this.state.response}&lt;/h1&gt;
                  &lt;p className="copy-clipboard"&gt;Copy to clipboard&lt;/p&gt;
                &lt;/div&gt;
              
         
                 
                {/* &lt;ButtonGroup&gt;
              &lt;Button&gt;Secure&lt;/Button&gt;
              &lt;Button&gt;Complex&lt;/Button&gt;
                &lt;/ButtonGroup&gt; */}
              &lt;/Col&gt;
            &lt;/Row&gt;
            &lt;Row&gt;
              &lt;Col sm="12" md={{ size: 8, offset: 2 }}&gt;
                &lt;button onClick={this.handleClick} id="get-pass-button" className="button"&gt;
                  Generate Password
                &lt;/button&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I believe this question is related to npm react-copy-to-clipboard!</p>