onChange monitoring user input into TextField component from Office-UI-Fabric on every render and displaying incorrect output

Question

I am trying to implement a UI where i take user input through the TextField component from Office-ui-fabric. I use onChange to monitor value. However, as i type in user input say the number '100' i can see the function rendered each time which i believe is a feature of onChange but after completing typing in my input i see only '10' in the console window.

I tried changing onChange to Blur as suggested in an old stackoverflow post but when i do that i don't see any console messages.

const [msg, setMsg] = React.useState("");
React.useEffect(()=>{
   vscode.postMessage(
     {
       command: 'setMsg',
       text: msg
     }
   );
},[msg])

return (
<div>
 <Stack>
   <Stack.Item grow>
   <Label style={{ color: 'white' }}>Enter number </Label>
   <TextField placeholder="Enter number of images" value={msg} onChange={event => { setMsg((event.target as HTMLInputElement).value); console.log(msg);test() }} /> 
   </Stack.Item>
   </Stack>
</div>
);

I expect if i enter the number '100' i should see '100' in the console log. Currently i see'10'. Is this the right way to implement this functionality? New to react and office -ui-fabric and any help is appreciated.

Hi novice_coder, check my solution and let me know if that helps. — ravibagul91, Sep 06 '19 at 01:03

score 1 · Accepted Answer · answered Sep 06 '19 at 00:56

1

setState in React is async and takes some time to execute / update state.

When you do this,

onChange={event => { 
   setMsg((event.target as HTMLInputElement).value); 
   console.log(msg);
   test() 
}}

After setState you are trying to access the state which will in result gives you the previous state only.

To see actual effect, remove this console.log from onChange and make use of useEffect hook. As you already have useEffect which will execute on msg change, you just need to add console.log(msg) line in it.

React.useEffect(()=>{
        console.log(msg); // Now you will get updated value every time.
        vscode.postMessage(
            {
                command: 'setMsg',
                text: msg
            }
        );
},[msg])

answered Sep 06 '19 at 00:56

ravibagul91

20,072
5
36
59

Thanks ! I tried your suggestion and it works. The only problem being i input the value in the TextField say 1000 but i don't see the console log immediately. I give user input to another TextField is when i can see the value of msg = 1000 in the console. Is this a side effect of my implementation? Is there a better way to go about this? – novice_coder Sep 06 '19 at 01:23
Here dependency array comes into picture, as you provided dependency array to `useEffect` it will only run when that dependency gets changed. For any other input change it will not execute this `useEffect`. If you want to show state value on every render you can simply use `useEffect` without any dependency like `useEffect(() =>{console.log(msg)})`.Now this will execute on any input change. – ravibagul91 Sep 06 '19 at 01:30
You can add any number of `useEffect`. – ravibagul91 Sep 06 '19 at 01:31
@novice_coder, can you also provide steps for this *The only problem being i input the value in the TextField say 1000 but i don't see the console log immediately. I give user input to another TextField is when i can see the value of msg = 1000 in the console.* – ravibagul91 Sep 06 '19 at 04:15
1

Thank you you for your help but i figured out the issue. I was erroneously monitoring the function setMsg instead of msg in useEffect. – novice_coder Sep 09 '19 at 19:11

onChange monitoring user input into TextField component from Office-UI-Fabric on every render and displaying incorrect output

1 Answers1