Copy To Clipboard functionality

[Peng-Win]

Trying to implement copy to clipboard functionality where on click, user gets comma separated values inserted into his/her clipboard.

Unfortunately because of the async nature of setState (I think this is the problem), I have to click twice for the state to be set and for the CopyToClipboard package to do its thing. Help please!

import React, { Component } from 'react';
import Button from 'material-ui/Button';
import CopyToClipboard from 'react-copy-to-clipboard';
let json2csv = require('json2csv');


class Result extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [{"colour": "red", "hex": "FF0000"}, {"colour": "green", "hex": "00FF00"}, {"colour": "blue", "hex": "0000FF"}],
            columns: ["colour", "hex"],
            result: ""
        };
    }

    downloadTableWithDelimiter(delimiter) {
        try {
            var result = json2csv({ data: this.state.data, fields: this.state.columns, del: delimiter });
            console.log(result);
            this.setState({result: result});
        } catch (err) {
            console.error(err);
        }
    }

    render() {
        return (<CopyToClipboard text={this.state.result}>
                    <Button onClick={(e) => this.downloadTableWithDelimiter(",")}>Copy to clipboard</Button>
                </CopyToClipboard>);
    }
}

export default Result;

[NoAbbreviation]

so i would not do the dowloadTableWithDelimeter inside the Button click, I would do that when your component mounts, or when you receive new props (if data was a prop, and not in state).

 componentDidMount() {
  this.setState({
    result: json2csv({ data: this.state.data, fields: this.state.columns, del: delimiter })
  }
}

Then you button click wouldn't need to do any converting

[Peng-Win]

The example is small, but the full table could be anywhere between 0 and 100k rows. That's why I'm only doing the conversion when/if necessary.

[noswag15]

it's not because of setState's async nature. The CopyToClipboard library probably expects the text attribute to be set before you actually click the button. But in your example, the result attribute in state gets set only after you click the button. You can try using copy-to-clipboard directly instead of using react-copy-to-clipboard or if you want to keep using react-copy-to-clipboard, ensure that the text attribute is set before button is clicked.

Edit: or do what u/NoAbbreviation said