Multiple CopyToClipboard on the same page don't work

[jeffceriello]

Hi,

I have two <CopyToClipboard> components on one page. If I click on one the first time, the text gets copied. When I click on the second button or click again on the first button I get an undefined text.

<h3>Embed code</h3>
                <div className={`${styles.codeBox} p-4 d-flex flex-column mb-5 position-relative`}>
                    &lt;iframe src=&quot;https://stikii.co/campaigns/5aday/&quot; style=&quot;border:0px #ffffff none;&quot; name=&quot;myiFrame&quot; scrolling=&quot;no&quot; frameborder=&quot;1&quot; marginheight=&quot;0px&quot; marginwidth=&quot;0px&quot; height=&quot;400px&quot; width=&quot;600px&quot; allowfullscreen&gt;&lt;/iframe&gt;
                    <div className="d-flex flex-column flex-lg-row justify-content-between align-items-end">
                        <span className={styles.copiedMessage}>{copy.copied ? "Copied!" : null}</span>
                        <CopyToClipboard text={copy.value}
                            onCopy={(text, result) => {
                                console.log(text);
                                console.log(copy.value);
                                setCopy({copied: true});
                                setCopyUrl({copied: false});
                            }}>
                                <span className='mainButton align-self-end mt-4'>Copy code</span>
                        </CopyToClipboard>
                    </div>
                </div>

                <h3>Link to Stikii</h3>
                <div className={`${styles.codeBox} p-4 d-flex flex-column position-relative`}>
                    https://stikii.co/campaigns/5aday/
                    <div className="d-flex flex-column flex-lg-row justify-content-between align-items-end">
                        <span className={styles.copiedMessage}>{copyUrl.copied ? "Copied!" : null}</span>
                        <CopyToClipboard text={copyUrl.value}
                            onCopy={(text, result) => {
                                console.log(text);
                                console.log(copyUrl.value);
                                setCopyUrl({copied: true});
                                setCopy({copied: false});
                            }}>
                                <span className='mainButton align-self-end mt-4'>Copy URL</span>
                        </CopyToClipboard>
                    </div>
                </div>

Is it not meant to work with two or more copy buttons?

Thanks

[nkbt]

The problem with implementation. You can put as many copy buttons on the page as necessary they don't clash. I cannot suggest any fixes for your code without codepen/sandbox example

[jeffceriello]

Sure, here is the sandbox https://codesandbox.io/embed/competent-worker-ultdrh?fontsize=14&hidenavigation=1&theme=dark

Thanks for your help

[aifrim]

Your problem is unrelated. You are updating your state and removing the value. Use this

setState(s => ({...s, copied: true | false}))

Doing so, you are not removing the other props from your state.