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
– user3810193, Commented Mar 14, 2022 at 4:53
@zainuldin if that's the thing, what's the point of setfName — user3810193
– user3810193, Commented Mar 14, 2022 at 5:04

zain ul din · Accepted Answer · 2022-03-14 05:21:45Z

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, 2022 at 5:21

answered Mar 14, 2022 at 4:47

zain ul din

1

Sign up to request clarification or add additional context in comments.

5 Comments

user3810193 Over a year ago

it is not what i was trying to solve .. thx anyway

zain ul din Over a year ago

what you are trying to slove please explain

zain ul din Over a year ago

your question was react useState is not taking 1st input but now it's working

user3810193 Over a year ago

try to get the right fName value inside the onChange function. (see my updated code comment)

zain ul din Over a year ago

it's not possible i think react state take some time to update

Ryan Le · Accepted Answer · 2022-03-14 04:32:09Z

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, 2022 at 4:32

Ryan Le

8,5201 gold badge18 silver badges27 bronze badges

Comments

Bo King · Accepted Answer · 2022-03-14 04:32:51Z

-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, 2022 at 4:32

Bo King

527 bronze badges

2 Comments

user3810193 Over a year ago

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.

zain ul din Over a year ago

@user3810193 you can pass it by props to other components

deadcoder0904 · Accepted Answer · 2022-03-14 06:12:13Z

-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, 2022 at 6:12

answered Mar 14, 2022 at 4:45

deadcoder0904

8,98118 gold badges93 silver badges212 bronze badges

5 Comments

user3810193 Over a year ago

this is not the problem..

deadcoder0904 Over a year ago

@user3810193 did you try it?

user3810193 Over a year ago

yes, still get the same console.log

deadcoder0904 Over a year ago

@user3810193 nope, it should work. try making a codesandbox or something. see stackoverflow.com/a/58211012/6141587 or sebhastian.com/react-onchange

deadcoder0904 Over a year ago

@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.

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related