Cant equalize value of input to a react useState Hook

Question

so, what i did try to do, was possible and was successfully done in react Class based component. you see, basically what i tried to do was a simple name-shower app. what this app does, it receives the value, and when the button is clicked, the value is shown in a h1 tag. it was all good until i tried to make the "value attribute" of the input tag equal to a useState (or react hook) value. it doesn't let me even type! what is my problem? (my app is based on one component)

import React, { useState } from 'react';
import './App.css';

function App() {
 const [string, setString] = useState("")
 const [input, setInput] = useState("")
 function handleInput(event){
  setInput(event.target.value)
 }
 function handleClick(){
   setString(input)
   setString("") // must empty the input box
  
 }
  return (
    <div>
      <input value={string} /* <= this must set the value of input to "string" state */ onChange={(event) => {handleInput(event)}}/>
      <button onClick={handleClick}>Click</button>
      <h1>your name: {string}</h1>
    </div>
    );
}
export default App;

tried several things like value={string}, making other hooks, but doesn't work. any solution or help will be appreciated!

Answer 1

You have your setter functions mixed up. On click, call setInput('') to clear the input, and setString(input) to set the <h1> content to the current input string:

 function App() { const [string, setString] = React.useState("") const [input, setInput] = React.useState("") function handleInput(event){ setInput(event.target.value) } function handleClick(){ setInput('') setString(input) } return ( <div> <input value={input} onChange={handleInput} /> <button onClick={handleClick}>Click</button> <h1>your name: {string}</h1> </div> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class="react"></div>

Or, even better, use name instead of string , the intent of the code will be clearer:

 function App() { const [input, setInput] = React.useState("") const [name, setName] = React.useState("") function handleInput(event){ setInput(event.target.value) } function handleClick(){ setInput('') setName(input) } return ( <div> <input value={input} onChange={handleInput} /> <button onClick={handleClick}>Click</button> <h1>your name: {name}</h1> </div> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class="react"></div>