Reputation: 8304
When clicking 'click', setIsAction is undefined. I must miss something obvious. Any idea?
import React, {useEffect, useState} from 'react';
function App() {
const {isAction, setIsAction} = useState(false);
useEffect(() => {
if (isAction) {
console.log('use effect');
}
}, [isAction, setIsAction]);
return (
<div
onClick={() => {
setIsAction(true);
}}
>
click
</div>
);
}
export default App;
Upvotes: 0
Views: 182
Reputation: 17898
useState returns an array with 2 items. You are trying object destructuring, but it must be array destructuring.
const [isAction, setIsAction] = useState(false);
Upvotes: 3
Reputation: 5054
You are destructuring instead useState return array with 2 items. Change this :
const {isAction, setIsAction} = useState(false);
to
const [isAction, setIsAction] = useState(false);
Ex :
import React, {useEffect, useState} from 'react';
function App() {
const [isAction, setIsAction] = useState(false);
useEffect(() => {
if (isAction) {
console.log('use effect');
}
}, [isAction, setIsAction]);
return (
<div
onClick={() => {
setIsAction(true);
}}
>
click
</div>
);
}
export default App;
I have modified your example to get better context . You can found demo here : https://stackblitz.com/edit/react-stfhm5
Upvotes: 0
Reputation: 1054
import React, {useEffect, useState} from 'react';
function App() {
# need to change here just
const [isAction, setIsAction] = useState(false);
useEffect(() => {
if (isAction) {
console.log('use effect');
}
}, [isAction, setIsAction]);
return (
<div
onClick={() => {
setIsAction(true);
}}
>
click
</div>
);
}
export default App;
Upvotes: 0
Reputation: 996
Change this:
const {isAction, setIsAction} = useState(false);
To
const [isAction, setIsAction] = useState(false);
Upvotes: 1