Trying to get Button to copy URL and render snackbar using React Hooks

Question

I'm still learning react hooks. As the title states, when the user hits the button labeled 'Copy to Clipboard' I want it to of course copy the url (which it does), Then I was trying to useEffect so that it will also display a snackbar (from materialui) that tells the user the wesite was copied successfully to the clipboard.

I'm getting the error:

"Expected an assignment or function call and instead saw an expression no-unused-expressions"

I know it's something about how i'm calling "setopenWebsiteSnackbar" in useEffect. I'm sure there's a simple solution i'm just not understanding.

const [isCopiedWebsite, setCopiedWebsite] = useClipboard("https://www.websiteIwanttoCopy.com");

useEffect(() => {setopenWebsiteSnackbar,
    console.log("Website Copied")}, 
    [isCopiedWebsite]
    )

  const [openWebsiteSnackbar, setopenWebsiteSnackbar] = React.useState(false);
  const handleClickWebsite = () => {
  setopenWebsiteSnackbar(true);
  };
  const handleCloseWebsite = (event, reason) => {
      if (reason === 'clickaway') {
      return;
  }
  setopenWebsiteSnackbar(false);
};


return (
<Button variant="contained" size="large" color="secondary" onClick={setCopiedWebsite}>Copy to Clipboard</Button>

<div className={classes.root}>

<Snackbar open={openWebsiteSnackbar} autoHideDuration={6000} onClose={handleCloseWebsite }>
        <Alert onClose={handleCloseWebsite } severity="success">
        Website URL successfully copied!
        </Alert>
        </Snackbar>

)

score 0 · Accepted Answer · answered Apr 26 '21 at 21:53

setopenWebsiteSnackbar is a function. You currently call that function in other places, for example:

setopenWebsiteSnackbar(true);

But in your useEffect you aren't calling it, you just have an unused reference to it:

setopenWebsiteSnackbar,

The comma also doesn't make much sense there. Did you mean to call the function?:

useEffect(() => {
  setopenWebsiteSnackbar(true);
  console.log("Website Copied");
}, [isCopiedWebsite]);

Basically if you want the "effect" to be that the snackbar opens, then you'd want to call that function and update that state to do that.

Thank you for the kind reply. That makes sense. – zerosuit Apr 26 '21 at 22:39 — zerosuit, Apr 26 '21 at 22:39

Trying to get Button to copy URL and render snackbar using React Hooks

1 Answers1