How can I copy react props into my Clipboard

Question

Currently, I have data in "this.props.embed_url"... and I want to allow my user to click on the gif shown, and they'll have the embed URL copied to their clipboard. Preferably using the onClick option. But any solution would be great!

import React, {Component} from 'react';

class GIFView extends Component {
    constructor(props){
        super(props);
    }


    render(){
        return(
            <div className = 'gif-item'>
                <img src={this.props.src} placeholder={this.props.embed_url} className = 'gif-image'/>
                <div>
                <a href = {this.props.bitly_url} target="_blank" rel="noopener noreferrer" className = 'gif-title'>{this.props.title}</a>
                </div>
            </div>
        )
    }
}

export default GIFView;

Answer 1

You can add an onChange listener on the gif and call the copy-to-clipboard function.

For the function, you can refer to the How do I copy to the clipboard in JavaScript? discussion.

Answer 2

I figured it out, simply enough use the Navigate.clipboard tool!

onClick = {() => {navigator.clipboard.writeText(this.props.embed_url)}}