title: How to use 'useState' to change the value of <input> in React?
body: <p>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.</p>
  <p>The input component is:</p>
  <pre><code>export function Search(){
     const [inputValue, setInputValue] = useState(&quot;&quot;)
  
     const handleInput = (event) =&gt; {
         setInputValue(event.target.value)
     } 
  
     return(
         &lt;input value={inputValue} onChange={handleInput}/&gt;
         &lt;Suggestions mySuggestions={mySuggestions} setInputValue={setInputValue} /&gt;
     )
  }
  </code></pre>
  <p>And the suggestions component is:</p>
  <pre><code>export function Suggestions({setInputValue}){
  
        return (
           &lt;div className=&quot;suggestions&quot;&gt;
              &lt;ul&gt;
                 {mySuggestions.map((suggestion, index) =&gt; {
                    const {meaning} = suggestion._source
                    return &lt;li onClick={()=&gt; setInputValue({meaning})} key={index}&gt;{meaning}&lt;/li&gt;
                  })}
              &lt;/ul&gt;
           &lt;/div&gt;
          )
      }
  
  };
  </code></pre>
  <p>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.</p>
  <p>Does anyone know what is the problem with my code?</p>
  <p>Update:</p>
  <p>I tried removing the curly braces from <code>onClick={()=&gt; setInputValue({meaning})}</code>, but it still didn't work. I tried <code>onClick={()=&gt; setInputValue(meaning)}</code>.</p>