How to Copy to clipboard in React JS

Question

Noob Alert

I was trying to copy the displayed <this.state.response> which is inside an <h1>. The <p> tag should act as the copy button for which I would like to give the copy action. I tried using react-copy-to-clipboard package but failed as I already have some states defined in my code.

<div>
    //content to be copied
            <h1 id="copy" className="password-display"> {this.state.response}</h1>
     //acts as the copy button
            <p className="copy-clipboard">Copy to clipboard</p>
</div>

Home.js

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 => this.setState({ response: res.chunk }))
      .catch(err => console.log(err));
  }



  callApi = async () => {
    const response = await fetch('/password-api');
    const body = await response.json();

    if (response.status !== 200) throw Error(body.message);

    return body;
  };

  handleClick = async () => {
    await this.callApi()
       .then(res => this.setState({ response: res.chunk }))
 };

  
  render() {
    return (
      <div className="App-header">
        <Header />

        <Container>
          <Row>
            <Col sm="12" md={{ size: 8, offset: 2 }}>
          <div>
                <h1 id="copy" className="password-display"> {this.state.response}</h1>
                <p className="copy-clipboard">Copy to clipboard</p>
              </div>
            
       
               
              {/* <ButtonGroup>
            <Button>Secure</Button>
            <Button>Complex</Button>
              </ButtonGroup> */}
            </Col>
          </Row>
          <Row>
            <Col sm="12" md={{ size: 8, offset: 2 }}>
              <button onClick={this.handleClick} id="get-pass-button" className="button">
                Generate Password
              </button>
            </Col>
          </Row>
        </Container>
        <Footer />
      </div>
    );
  }
}

I believe this question is related to npm react-copy-to-clipboard!

I believe this question is related to npm react-copy-to-clipboard! — Varun Haridas, Aug 07 '18 at 09:22
Just so you're aware, React is all just Javascript, so you don't actually need a third-party component and can instead use one of the techniques demonstrated in the link provided by Isaac. For example, you could create a `copyResponse` method like the one from the link, that's executed when clicking the button. — lukeic, Aug 07 '18 at 11:30

trixn · Accepted Answer · 2018-08-07T09:25:18.287

1

According to the documentation of react-copy-to-clipboard you simply have to wrap the element that acts as a button to copy. So inside your render() function:

<div>
    <h1 id="copy" className="password-display"> {this.state.response}</h1>
    <CopyToClipboard text={this.state.response}>
        <p className="copy-clipboard">Copy to clipboard</p>
    </CopyToClipboard>
</div>

edited Aug 07 '18 at 09:25

answered Aug 07 '18 at 09:15

trixn

15,761
2
38
55

1

Thanks this works, I wonder it was so simple! (Y) – Varun Haridas Aug 07 '18 at 09:28

How to Copy to clipboard in React JS

1 Answers1