How to get first input value in react onChange and use it in onChange?

Question

I can't make react onChange to fire on the first keystroke, the second input works. My goal is to get the new fName value to be used in other functions.

export default function Name() {
  const [fName, setfName] = React.useState("");

  return (
      <input
        type="text"
        placeholder="First Name"
        onChange={(e) => {
          setfName(e.target.value);
          console.log("fname", fName);

          someOtherFunctions(fName); // i need to keep the function here to react to each user input change. how to get the right fName value here? 
        }}
      />

}

Typing 'abcd' and console prints:

fname 
fname a
fname ab
fname abc

@zainuldin im in new to react useEffect, not sure how to code it. can you give an example (i updated my code too) — user3810193, Mar 14 '22 at 04:53
@zainuldin if that's the thing, what's the point of setfName — user3810193, Mar 14 '22 at 05:04
pass e.targe.value directly to function there solves the problem. is it the good practice to do such? or shall i use useEffect somewhere and get the value and pass in the function? — user3810193, Mar 14 '22 at 05:12
you can pass e.target.value to function it's totally fine. useEffect is only used when you want to update value inside UI also — zain ul din, Mar 14 '22 at 05:15
if you don't want to use value in UI then you can use simple javascript type instead of useState — zain ul din, Mar 14 '22 at 05:16
well yes i do need to display the value inside UI too.. can you kindly show me how to do it with useEffect? the answers below aren't really helpful.. — user3810193, Mar 14 '22 at 05:17
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242903/discussion-between-zain-ul-din-and-user3810193). — zain ul din, Mar 14 '22 at 05:45

zain ul din · Accepted Answer · 2022-03-14T05:21:45.030

1

try this approach do console.log before of return whenever state will change it will re-render the page. Have a look at this code

import "./styles.css";
import React , {useState , useEffect} from 'react'


export default function App() {
  const [fName, setfName] = useState("");

 // every time state change react will automatically re-render the page
// console.log(fName)
 
function PrintMyState(state){
   console.log(state)
}
 
// calls whenever state will be change , another approach
useEffect( ()=>{ PrintMyState(fName) } , [fName] ) 

 return (

  <input
    type="text"
    placeholder="First Name"
    onChange={(e) => {
     setfName(e.target.value)
    }}
   />
 );
}

sand Box Demo click here

edited Mar 14 '22 at 05:21

answered Mar 14 '22 at 04:47

zain ul din

1
1
2
23

it is not what i was trying to solve .. thx anyway – user3810193 Mar 14 '22 at 04:52
what you are trying to slove please explain – zain ul din Mar 14 '22 at 04:53
your question was react useState is not taking 1st input but now it's working – zain ul din Mar 14 '22 at 04:54
try to get the right fName value inside the onChange function. (see my updated code comment) – user3810193 Mar 14 '22 at 04:54
it's not possible i think react state take some time to update – zain ul din Mar 14 '22 at 04:56

score 0 · Answer 2 · answered Mar 14 '22 at 04:32

0

Reactjs state is asynchronously updated, and batching within the function. So logging within the function itself the last state "" will be printed.

--> Try moving console.log("fname", fName); right before your return function.

answered Mar 14 '22 at 04:32

Ryan Le

7,708
1
13
23

score -2 · Answer 3 · answered Mar 14 '22 at 04:32

-2

onChange function is fired in every keystroke. It looks like you misunderstand something about React Hooks. In your code, setfName is working asynchronously, so first console log prints the previous fName. console.log("fname", fName + e.target.value); will print current value correctly. or You can use useEffect hook to print current value.

answered Mar 14 '22 at 04:32

Bo King

62
6

i think i understand but not sure how to fix it, if my goal is to get the new fName value to be used in other functions. – user3810193 Mar 14 '22 at 04:39
@user3810193 you can pass it by props to other components – zain ul din Mar 14 '22 at 04:41

deadcoder0904 · Answer 4 · 2022-03-14T06:12:13.850

-2

you need to put value={fName} for the input to work:

<input
  type="text"
  value={fName}
  placeholder="First Name"
  onChange={(e) => {
      setfName(e.target.value);
      console.log("fname", e.target.value);
  }}
/>

for logging, run a useEffect call that runs everytime fName changes:

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

the dependency array [fName] means that run the function inside useEffect, in this case console.log(fName) every time fName changes.

edited Mar 14 '22 at 06:12

answered Mar 14 '22 at 04:45

deadcoder0904

7,232
12
66
163

this is not the problem.. – user3810193 Mar 14 '22 at 04:47
@user3810193 did you try it? – deadcoder0904 Mar 14 '22 at 04:47
yes, still get the same console.log – user3810193 Mar 14 '22 at 04:47
@user3810193 nope, it should work. try making a codesandbox or something. see https://stackoverflow.com/a/58211012/6141587 or https://sebhastian.com/react-onchange/ – deadcoder0904 Mar 14 '22 at 04:50
@user3810193 i misread your question. i thought input wasn't working. added an explanation for `console.log` to work using `useEffect`. since react state is asynchronous, you can't access it directly inside `onChange` call. you must run a useEffect to access it everytime it changes. see my code for explanation. – deadcoder0904 Mar 14 '22 at 06:14

How to get first input value in react onChange and use it in onChange?

4 Answers4