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>
)
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.