I have a React app in which I have a TextBox and a button. When I click on the button I want the TextBox value to be cleared. How can I achieve this without using a form?
const [name, setName] = useState('')
const handleChange = e => {
setName(e.target.value)
}
const handleSubmit = () => {
// clear the TextBox
}
<input type="text" onChange={handleChange} />
<button onClick={handleSubmit}></button>
Usually, in cases like this, input values are stored in state, which in your case it is called name
So you need to also map the input value to the state, then just set the value of name to nothing:
const [name, setName] = useState('')
const handleChange = (e) => {
setName(e.target.value)
}
const handleSubmit = () => {
setName('')
}
<input type="text" value={name} onChange={handleChange} />
<button onClick={handleSubmit}></button>
const [name, setName] = useState('')
const handleChange = (e) => {
setName(e.target.value)
}
const handleSubmit = () => {
setName('') // clear the TextBox
}
<input type="text" value={name} onChange = {handleChange} />
<button onClick = {handleSubmit}></button>
value of the input to make it controlled input
