useState function is not working in functional component

Question

I want to change a state (filterConsultantId) with a useState function (setFilterConsultantId) after I trigger a normal function (handleConsultantChange) and I expect the state value is changed when I use the state in another normal function (getActiveLeads). But the state didn't change. Please see my React functional component below:

const TabActiveLeads = ({
    ...
}) => {
    const [filterConsultantId, setFilterConsultantId] = useState('');   
    
    //after this arrow function triggered, 
    const handleConsultantChange = (event) => {
        setFilterConsultantId(event.target.value); //and the filterConsultantId should be changed here
        
        //this getActiveLeads function is called
        getActiveLeads();
    };
    
    const getActiveLeads = () => {
        
        // but the filterConsultantId here is not changed after it should be changed inside handleConsultantChange function
        console.log(filterConsultantId);
    }; 
};

export default TabActiveLeads;

I don't understand, why filterConsultantId is not changed inside the getActiveLeads function? Previously it should be changed by calling setFilterConsultantId inside the handleConsultantChange function.

Thanks for any help..

does this help you in this issue: https://ysfaran.github.io/blog/post/0002-use-state-with-promise/ — Sinan Yaman, Dec 11 '20 at 07:51
@SinanYaman it's too complicated but thanks for the link. it is a nice reference — Dika, Dec 19 '20 at 01:16

score 3 · Accepted Answer · answered Dec 11 '20 at 07:52

3

setFilterConsultantId is the asynchronous method, so you can't get the updated value of filterConsultantId right after setFilterConsultantId. You should get it inside useEffect with adding a dependency filterConsultantId.

useEffect(() => {
  console.log(filterConsultantId);
}, [filterConsultantId]);

answered Dec 11 '20 at 07:52

wangdev87

8,611
3
8
31

1

thanks! as a newbie, I was still confused with your answer but after I try, may I add: this useEffect should be placed inside the react functional component. Outside any normal function. – Dika Dec 11 '20 at 12:07
1

yes, that' right. for more details, refer to the doc. https://reactjs.org/docs/hooks-effect.html – wangdev87 Dec 11 '20 at 13:15

useState function is not working in functional component

1 Answers1

Linked