Usage of `Clipboard.js` in react throwing an error: First argument must be a String, HTMLElement,Throwing strings instead of Errorsthrow message; TypeError: first argument must be a string or BufferWhy is react throwing an errorErrors with clipboard.js in React component?Error in usage of stateless function in React?React children throw PropTypes errorError in passing an argument to a map callback function in ReactModal react component in material-ui app throwing errorError: Query.get failed: First argument must be an objectreact-navigation installation and first usage
Why did Spider-Man take a detour to Dorset?
How Can I Process Untrusted Data Sources Securely?
Why does "git status" show I'm on the master branch and "git branch" does not?
Is there a source that says only 1/5th of the Jews will make it past the messiah?
What do these three diagonal lines that cross through three measures and both staves mean, and what are they called?
What powers the air required for pneumatic brakes in aircraft?
how many bits in the resultant hash will change, if the x bits are changed in its the original input
Link of a singularity
Can I remove the doors before installing a sliding patio doors frame?
Is it OK to use personal email ID for faculty job applications or should we use (current) institute's ID
Kepler space telescope planets detection
How should the player unlock things?
A scene of Jimmy diversity
How to remove the first colon ':' from a timestamp?
Did 007 exist before James Bond?
Can you perfectly wrap a cube with this blocky shape?
Is this artwork (used in a video game) real?
What made Windows ME so crash-prone?
Returning strings showing all vertices from all polygons in shapefile using ArcPy?
Using two linked programs, output ordinal numbers up to n
How to ask my office to remove the pride decorations without appearing anti-LGBTQ?
Fantasy Story About A Boy And Girl That Enter A Fantasy World Pre-1994
Can a pizza stone be fixed after soap has been used to clean it?
Why do so many pure math PhD students drop out or leave academia, compared to applied mathematics PhDs?
Usage of `Clipboard.js` in react throwing an error: First argument must be a String, HTMLElement,
Throwing strings instead of Errorsthrow message; TypeError: first argument must be a string or BufferWhy is react throwing an errorErrors with clipboard.js in React component?Error in usage of stateless function in React?React children throw PropTypes errorError in passing an argument to a map callback function in ReactModal react component in material-ui app throwing errorError: Query.get failed: First argument must be an objectreact-navigation installation and first usage
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I am using https://github.com/zenorocha/clipboard.js in a react project and faing an issue in using it.
I tried using the way they explain here https://github.com/zenorocha/clipboard.js/issues/251
I need to copy something from input which is read only.
here my code goes:
import Clipboard from 'clipboard';
import IconCopy from '@material-ui/icons/FileCopy';
class CopyClass extends React.Component
componentDidMount ()
const button = this.copyIcon
const input = this.email
this.clipboard = new Clipboard(
button,
target: () => input
)
componentWillUnmount()
this.clipboard.destroy()
renderUserCaption ()
return (
<div>
<input
ref=el => this.email = el
value=this.props.user.email
type="text"
readOnly=true
/>
document.queryCommandSupported('copy') && canCopy && (
<Tooltip title="Copy this email address">
<IconCopy
ref=(el) => this.copyIcon = el
/>
</Tooltip>
)
</div>
)
render ()
return (
<div>
<SomeOtherComponent
titleCaption=this.renderUserCaption()
>
this.props.children
</SomeOtherComponent>
</div>
)
And I am getting error:
Uncaught TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList
at listen (clipboard.js:736)
at Clipboard.listenClick (clipboard.js:183)
at new Clipboard (clipboard.js:151)
at UserCard.componentDidMount (index.js:107)
at commitLifeCycles (react-dom.development.js:16227)
at commitAllLifeCycles (react-dom.development.js:17592)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at commitRoot (react-dom.development.js:17788)
at completeRoot (react-dom.development.js:19240)
at performWorkOnRoot (react-dom.development.js:19169)
at performWork (react-dom.development.js:19077)
at performSyncWork (react-dom.development.js:19051)
at requestWork (react-dom.development.js:18920)
at scheduleWork (react-dom.development.js:18729)
at Object.enqueueSetState (react-dom.development.js:12457)
at AsyncComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:375)
at AsyncComponent._callee$ (index.js:20)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:296)
at Generator.prototype.(anonymous function) [as next] (http://localhost:4000/static/js/bundle.js:17522:21)
at step (index.js:79)
at index.js:79
Where I have done wrong?
Updated code: and still the issue exist, I have now taken button itself
<RootRef rootRef=(el) => this.copyIcon = el>
<button>
click me
</button>
</RootRef>
Now the if I log this.copyIcon.current - it's catually null.
javascript reactjs material-ui clipboard clipboard.js
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
add a comment |
I am using https://github.com/zenorocha/clipboard.js in a react project and faing an issue in using it.
I tried using the way they explain here https://github.com/zenorocha/clipboard.js/issues/251
I need to copy something from input which is read only.
here my code goes:
import Clipboard from 'clipboard';
import IconCopy from '@material-ui/icons/FileCopy';
class CopyClass extends React.Component
componentDidMount ()
const button = this.copyIcon
const input = this.email
this.clipboard = new Clipboard(
button,
target: () => input
)
componentWillUnmount()
this.clipboard.destroy()
renderUserCaption ()
return (
<div>
<input
ref=el => this.email = el
value=this.props.user.email
type="text"
readOnly=true
/>
document.queryCommandSupported('copy') && canCopy && (
<Tooltip title="Copy this email address">
<IconCopy
ref=(el) => this.copyIcon = el
/>
</Tooltip>
)
</div>
)
render ()
return (
<div>
<SomeOtherComponent
titleCaption=this.renderUserCaption()
>
this.props.children
</SomeOtherComponent>
</div>
)
And I am getting error:
Uncaught TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList
at listen (clipboard.js:736)
at Clipboard.listenClick (clipboard.js:183)
at new Clipboard (clipboard.js:151)
at UserCard.componentDidMount (index.js:107)
at commitLifeCycles (react-dom.development.js:16227)
at commitAllLifeCycles (react-dom.development.js:17592)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at commitRoot (react-dom.development.js:17788)
at completeRoot (react-dom.development.js:19240)
at performWorkOnRoot (react-dom.development.js:19169)
at performWork (react-dom.development.js:19077)
at performSyncWork (react-dom.development.js:19051)
at requestWork (react-dom.development.js:18920)
at scheduleWork (react-dom.development.js:18729)
at Object.enqueueSetState (react-dom.development.js:12457)
at AsyncComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:375)
at AsyncComponent._callee$ (index.js:20)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:296)
at Generator.prototype.(anonymous function) [as next] (http://localhost:4000/static/js/bundle.js:17522:21)
at step (index.js:79)
at index.js:79
Where I have done wrong?
Updated code: and still the issue exist, I have now taken button itself
<RootRef rootRef=(el) => this.copyIcon = el>
<button>
click me
</button>
</RootRef>
Now the if I log this.copyIcon.current - it's catually null.
javascript reactjs material-ui clipboard clipboard.js
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
I don't think you can get a ref to aFileCopycomponent. Try to log the ref incomponentDidMountand see if it's set.console.log(button);
– Tholle
Mar 26 at 8:24
Previously I made typo on copyIcon. I fixed it, still, the issue exists. Yes, button is -undefined
– Coder
Mar 26 at 8:29
1
Alright, then I think that's the issue. You might be able to solve it by wrapping your icon in a RootRef.
– Tholle
Mar 26 at 8:32
1
Let me try :) Thank you
– Coder
Mar 26 at 8:33
@Tholle Can you check the question again, still the error, exists. (just edited)
– Coder
Mar 26 at 8:56
add a comment |
I am using https://github.com/zenorocha/clipboard.js in a react project and faing an issue in using it.
I tried using the way they explain here https://github.com/zenorocha/clipboard.js/issues/251
I need to copy something from input which is read only.
here my code goes:
import Clipboard from 'clipboard';
import IconCopy from '@material-ui/icons/FileCopy';
class CopyClass extends React.Component
componentDidMount ()
const button = this.copyIcon
const input = this.email
this.clipboard = new Clipboard(
button,
target: () => input
)
componentWillUnmount()
this.clipboard.destroy()
renderUserCaption ()
return (
<div>
<input
ref=el => this.email = el
value=this.props.user.email
type="text"
readOnly=true
/>
document.queryCommandSupported('copy') && canCopy && (
<Tooltip title="Copy this email address">
<IconCopy
ref=(el) => this.copyIcon = el
/>
</Tooltip>
)
</div>
)
render ()
return (
<div>
<SomeOtherComponent
titleCaption=this.renderUserCaption()
>
this.props.children
</SomeOtherComponent>
</div>
)
And I am getting error:
Uncaught TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList
at listen (clipboard.js:736)
at Clipboard.listenClick (clipboard.js:183)
at new Clipboard (clipboard.js:151)
at UserCard.componentDidMount (index.js:107)
at commitLifeCycles (react-dom.development.js:16227)
at commitAllLifeCycles (react-dom.development.js:17592)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at commitRoot (react-dom.development.js:17788)
at completeRoot (react-dom.development.js:19240)
at performWorkOnRoot (react-dom.development.js:19169)
at performWork (react-dom.development.js:19077)
at performSyncWork (react-dom.development.js:19051)
at requestWork (react-dom.development.js:18920)
at scheduleWork (react-dom.development.js:18729)
at Object.enqueueSetState (react-dom.development.js:12457)
at AsyncComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:375)
at AsyncComponent._callee$ (index.js:20)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:296)
at Generator.prototype.(anonymous function) [as next] (http://localhost:4000/static/js/bundle.js:17522:21)
at step (index.js:79)
at index.js:79
Where I have done wrong?
Updated code: and still the issue exist, I have now taken button itself
<RootRef rootRef=(el) => this.copyIcon = el>
<button>
click me
</button>
</RootRef>
Now the if I log this.copyIcon.current - it's catually null.
javascript reactjs material-ui clipboard clipboard.js
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
I am using https://github.com/zenorocha/clipboard.js in a react project and faing an issue in using it.
I tried using the way they explain here https://github.com/zenorocha/clipboard.js/issues/251
I need to copy something from input which is read only.
here my code goes:
import Clipboard from 'clipboard';
import IconCopy from '@material-ui/icons/FileCopy';
class CopyClass extends React.Component
componentDidMount ()
const button = this.copyIcon
const input = this.email
this.clipboard = new Clipboard(
button,
target: () => input
)
componentWillUnmount()
this.clipboard.destroy()
renderUserCaption ()
return (
<div>
<input
ref=el => this.email = el
value=this.props.user.email
type="text"
readOnly=true
/>
document.queryCommandSupported('copy') && canCopy && (
<Tooltip title="Copy this email address">
<IconCopy
ref=(el) => this.copyIcon = el
/>
</Tooltip>
)
</div>
)
render ()
return (
<div>
<SomeOtherComponent
titleCaption=this.renderUserCaption()
>
this.props.children
</SomeOtherComponent>
</div>
)
And I am getting error:
Uncaught TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList
at listen (clipboard.js:736)
at Clipboard.listenClick (clipboard.js:183)
at new Clipboard (clipboard.js:151)
at UserCard.componentDidMount (index.js:107)
at commitLifeCycles (react-dom.development.js:16227)
at commitAllLifeCycles (react-dom.development.js:17592)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at commitRoot (react-dom.development.js:17788)
at completeRoot (react-dom.development.js:19240)
at performWorkOnRoot (react-dom.development.js:19169)
at performWork (react-dom.development.js:19077)
at performSyncWork (react-dom.development.js:19051)
at requestWork (react-dom.development.js:18920)
at scheduleWork (react-dom.development.js:18729)
at Object.enqueueSetState (react-dom.development.js:12457)
at AsyncComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:375)
at AsyncComponent._callee$ (index.js:20)
at tryCatch (runtime.js:62)
at Generator.invoke [as _invoke] (runtime.js:296)
at Generator.prototype.(anonymous function) [as next] (http://localhost:4000/static/js/bundle.js:17522:21)
at step (index.js:79)
at index.js:79
Where I have done wrong?
Updated code: and still the issue exist, I have now taken button itself
<RootRef rootRef=(el) => this.copyIcon = el>
<button>
click me
</button>
</RootRef>
Now the if I log this.copyIcon.current - it's catually null.
javascript reactjs material-ui clipboard clipboard.js
javascript reactjs material-ui clipboard clipboard.js
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
edited Mar 26 at 8:55
Coder
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
asked Mar 26 at 8:18
CoderCoder
1001 silver badge9 bronze badges
1001 silver badge9 bronze badges
I don't think you can get a ref to aFileCopycomponent. Try to log the ref incomponentDidMountand see if it's set.console.log(button);
– Tholle
Mar 26 at 8:24
Previously I made typo on copyIcon. I fixed it, still, the issue exists. Yes, button is -undefined
– Coder
Mar 26 at 8:29
1
Alright, then I think that's the issue. You might be able to solve it by wrapping your icon in a RootRef.
– Tholle
Mar 26 at 8:32
1
Let me try :) Thank you
– Coder
Mar 26 at 8:33
@Tholle Can you check the question again, still the error, exists. (just edited)
– Coder
Mar 26 at 8:56
add a comment |
I don't think you can get a ref to aFileCopycomponent. Try to log the ref incomponentDidMountand see if it's set.console.log(button);
– Tholle
Mar 26 at 8:24
Previously I made typo on copyIcon. I fixed it, still, the issue exists. Yes, button is -undefined
– Coder
Mar 26 at 8:29
1
Alright, then I think that's the issue. You might be able to solve it by wrapping your icon in a RootRef.
– Tholle
Mar 26 at 8:32
1
Let me try :) Thank you
– Coder
Mar 26 at 8:33
@Tholle Can you check the question again, still the error, exists. (just edited)
– Coder
Mar 26 at 8:56
I don't think you can get a ref to a
FileCopy component. Try to log the ref in componentDidMount and see if it's set. console.log(button);– Tholle
Mar 26 at 8:24
I don't think you can get a ref to a
FileCopy component. Try to log the ref in componentDidMount and see if it's set. console.log(button);– Tholle
Mar 26 at 8:24
Previously I made typo on copyIcon. I fixed it, still, the issue exists. Yes, button is -
undefined– Coder
Mar 26 at 8:29
Previously I made typo on copyIcon. I fixed it, still, the issue exists. Yes, button is -
undefined– Coder
Mar 26 at 8:29
1
1
Alright, then I think that's the issue. You might be able to solve it by wrapping your icon in a RootRef.
– Tholle
Mar 26 at 8:32
Alright, then I think that's the issue. You might be able to solve it by wrapping your icon in a RootRef.
– Tholle
Mar 26 at 8:32
1
1
Let me try :) Thank you
– Coder
Mar 26 at 8:33
Let me try :) Thank you
– Coder
Mar 26 at 8:33
@Tholle Can you check the question again, still the error, exists. (just edited)
– Coder
Mar 26 at 8:56
@Tholle Can you check the question again, still the error, exists. (just edited)
– Coder
Mar 26 at 8:56
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55352566%2fusage-of-clipboard-js-in-react-throwing-an-error-first-argument-must-be-a-str%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55352566%2fusage-of-clipboard-js-in-react-throwing-an-error-first-argument-must-be-a-str%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't think you can get a ref to a
FileCopycomponent. Try to log the ref incomponentDidMountand see if it's set.console.log(button);– Tholle
Mar 26 at 8:24
Previously I made typo on copyIcon. I fixed it, still, the issue exists. Yes, button is -
undefined– Coder
Mar 26 at 8:29
1
Alright, then I think that's the issue. You might be able to solve it by wrapping your icon in a RootRef.
– Tholle
Mar 26 at 8:32
1
Let me try :) Thank you
– Coder
Mar 26 at 8:33
@Tholle Can you check the question again, still the error, exists. (just edited)
– Coder
Mar 26 at 8:56