Search code examples
reactjsdatabasebuttoninputonchange

Clear input target

I'm using an input to fetch data in my database, but I'd like the input to be cleared after data is submitted.

        <input placeholder='Title' onChange={(event) => {setTitle(event.target.value);}}/> 
        <button onClick={writeTitleToDatabase}>Update Title</button>

I tried to use setTitle('') but it doesn't work properlly. The variable title is set to null but input field still filled.

const writeTitleToDatabase = () => {
    update(ref(database, 'id/' + fetchIdInfo),{      
      title          
    })
      setTitle('');
};
Solution

  • Add missing value attribute in the input tag

     <input placeholder='Title' value={title} onChange={(event) => {setTitle(event.target.value);}}/> 
    <button onClick={writeTitleToDatabase}>Update Title</button>