Question 72804 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Using useState() to populate Input not working properly – Reactjs

I am trying to handle an event that fires after every change of an input, which is going to be something like a search suggestion. The problem is that even though the setValue function is called and the input uses that value to populate itself, its value is being reloaded empty instead of what was typed. So the only data I see in the input (and in the useState value) is the last character typed.

I might be making a mistake in how hooks work in Next/React, but I couldn’t figure out what it is.

Forgetting about what I want to do after the input value changes, this is the code that I tried to use to keep the data in the input and alse store it in a useState. Maybe there are other solutions, but what bothers me is that this is supposed to be simple but something is wrong.

import { Input } from '@nextui-org/react';

... 

const [value, setValue] = useState<string>()

...

<Input
  value={value} 
  onChange={event => setValue(event.currentTarget.value)}
/>

EDIT:

After I showed my coworker the problem he found that I was using an import which already has an "onChange" built in it. My bad for simplifying the component to post the question here, since the problem was not at the code mentioned above.

The property "register" from useForm was conflicting with the "onChange".

And also "event.currentTarget" should be "event.target" as people mentioned here at the answers.

Here is the full Input that I should have posted (This one doesn’t work but now I know why) :


import { useForm } from "react-hook-form";

...

const { register, handleSubmit } = useForm()

...

<Input
  {...register("titleSearchTerms")}
  css={{width: '100%'}}
  size="lg"
  bordered
  onChange={event => setValue(event.currentTarget.value)}
  labelRight={<MdSearch></MdSearch>}
/>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    A co-worker of mine found that the problem was the "...resgister" which is a property from useForm. This "register" already has an onChange embeded on it, so both "onChange" were kinda conflicting with each other.

    Another problem, which was correctly mentioned here in the answers, was the use of "event.currentTarget" instead of "event.target".

    My bad for not showing all the imports at the example here.


  2. 0

    These are the changes I can suggest

     const [value, setValue] = useState(""); 
 const inputHandler = (event) => {
   setValue(event.target.value);
   console.log(event.target.value);
 };
<input type="text" value={value} onChange={inputHandler}/>{value}
    Login or Signup to reply.
  3. 0 
    import React, {useState} from "react" // you must import useState from react

const [value, setValue] = useState(""); // difine the useState with initial value empty 


<input type="number" value={value} onChange={(e)=>setValue(e.target.value)}/> // when onChange event fired you set the event value to your useState use the setValue
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search