0

I'm trying to achieve something like,

whenever the user change any input field value, update the state value normally and do something, like submit the form with updated state value.

I'm currently doing

    const [data, setData] = useState({
        search: '',
        field: '',
        direction: '',
    })

    const onHandleChange = (e) => {
        setData({
            ...data,
            [e.target.name]: e.target.value,
        })

        // Do soemthing with the updated data, for now I'll just console.log
        console.log(data);
    }

<input type="search" name="search" onChange={onHandleChange} value={data.search} />

Console logs outdated data

As on the screenshot, if I type 123 the most recent console log would be 12 It's always 1 step behind :/

One thing I thoght of using a useEffect()

but useEffect also runs the first render, which I dont want. I wouldn't want the form gets submitted on first render, but only when the user changes anything.

Aniket Das
  • 367
  • 1
  • 6
  • 17
  • 1
    Does this answer your question? [onChange in React doesn't capture the last character of text](https://stackoverflow.com/questions/33088482/onchange-in-react-doesnt-capture-the-last-character-of-text) – Ammar Oker Dec 14 '21 at 15:10
  • @AmmarOker no as they are not using `useState` hook, I have tried giving a callback function as second argument, but it doesn't work. – Aniket Das Dec 14 '21 at 15:24
  • TL;DR React state updates are asynchronously processed, use an `useEffect` hook with dependency on state update to handle side-effect of updating state. There are common patterns to skip the `useEffect` callback on the initial render. You should only be submitting the form when you want to anyway, so it should *already* be under/behind *some* sort of conditional logic, right? – Drew Reese Dec 15 '21 at 06:34

2 Answers2

0

you need to watch for data in useEffect as setstate is async action and will not reflect result immediatly,

useEffect(()=>{
// required action here
},[data]) // watch changes here
Madhuri
  • 1,060
  • 5
  • 17
  • The OP has already mentioned about `useEffect` and why he/she not wanting to use `useEffect`, please improve your answer. – Aniket Das Dec 14 '21 at 15:39
  • using "useEffect" only on first render is not the right way of knowing how to use it. I have updated on that basis. Next, state updation is async is also basic thing getting ignored. If one has these things cleared you can call your action anywhere with basic js knowledge. – Madhuri Dec 15 '21 at 07:31
  • @AniketDas Even original question anwsered here has the same anwser. SO is not here to give you readymade anwsers to all your questions. Use it to clear facts/concepts. – Madhuri Dec 15 '21 at 07:36
0

Well as Sanket Shas said, "React does not guarantee that the state changes are applied immediately".

So, you can try something like this if you don't want to use useEffect:

 const [data, setData] = useState({
    search: "",
    field: "",
    direction: "",
  });

  const onHandleChange = (e) => {
    let dataUpdated = {
      ...data,
      [e.target.name]: e.target.value,
    };
    setData(dataUpdated);

    // Do soemthing with the updated data, for now I'll just console.log
    console.log(dataUpdated);
  };

<input type="search" name="search" onChange={onHandleChange} value={data.search} />
scubells
  • 1