CODEWITHSUNDEEP
reactjsreact-hooks
kenpeter
kenpeter

Reputation: 8304

React hook useState isAction is not defined

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;

full code

Upvotes: 0

Views: 182

Answers (4)

SuleymanSah
SuleymanSah

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

Shubham Verma
Shubham Verma

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

Abu Sufian
Abu Sufian

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

bakar_dev
bakar_dev

Reputation: 996

Change this:

const {isAction, setIsAction} = useState(false);

To

 const [isAction, setIsAction] = useState(false);

Upvotes: 1

Related Questions