How to use 'useState' to change the value of <input> in React?

Question

I made an app with React that has a search box that displays suggestions to the users as they type. Now I would like to make these suggestions clickable, so when the user clicks on one of them, it will replace the value of the search box.

The input component is:

export function Search(){
   const [inputValue, setInputValue] = useState("")

   const handleInput = (event) => {
       setInputValue(event.target.value)
   } 

   return(
       <input value={inputValue} onChange={handleInput}/>
       <Suggestions mySuggestions={mySuggestions} setInputValue={setInputValue} />
   )
}

And the suggestions component is:

export function Suggestions({setInputValue}){

      return (
         <div className="suggestions">
            <ul>
               {mySuggestions.map((suggestion, index) => {
                  const {meaning} = suggestion._source
                  return <li onClick={()=> setInputValue({meaning})} key={index}>{meaning}</li>
                })}
            </ul>
         </div>
        )
    }

};

The 'setInputValue' is working properly in the first component as the value updates as I type, but in the second component, it isn't working. The suggestions are displayed, but when I click on them, the value doesn't update.

Does anyone know what is the problem with my code?

Update:

I tried removing the curly braces from onClick={()=> setInputValue({meaning})}, but it still didn't work. I tried onClick={()=> setInputValue(meaning)}.

Given this line: const [inputValue, setInputValue] = useState("") your state is a string, though later you update it with an object: onClick={()=> setInputValue({meaning})}. You need to decide what you want, because it can't be both. I would expect it to be: onClick={()=> setInputValue(meaning)} — Yoshi
– Yoshi, Commented Jul 6, 2021 at 12:14
I removed the curly braces, but it still didn't work. But thank you for the suggestion! — Adriano174
– Adriano174, Commented Jul 6, 2021 at 12:28

Anish Antony · Accepted Answer · 2021-07-06 12:35:37Z

1

Just add a curly brace in Suggestions()

export function Suggestions({ setInputValue }) {
  return (
    <div className="suggestions">
      <ul>
        {mySuggestions.map((suggestion, index) => {
          const { meaning } = suggestion._source;
          return (
            <li onClick={() => setInputValue(meaning)} key={index}>
              {meaning}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

edited Jul 6, 2021 at 12:35

answered Jul 6, 2021 at 12:06

Anish Antony

1,52511 silver badges13 bronze badges

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

6 Comments

Adriano174 Over a year ago

Sorry, this was a typo in the entry. There is this curly brace in my code. I already corrected the entry.

Anish Antony Over a year ago

There was one extra curly braces inside setInputValue as well,

Adriano174 Over a year ago

I tried removing them, but it still didn't work. Is there anything else that could be causing the problem?

Anish Antony Over a year ago

The code I posted is working in my system, may be you can create a codesandbox and show

Adriano174 Over a year ago

I am new at Stackoverflow. I still don't know how to create a codesandbox. I will search about it.

|

Collectives™ on Stack Overflow

How to use 'useState' to change the value of <input> in React?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related