In REACT JS How can we clear input field after submitting values

[jyotirmoydas12]

I have this assignment and I am almost done with it. Just stuck with this issue where I want to clear the input text field after submitting the values. Below is my code :

index.js

import react from 'react';
import reactdom from 'react-dom';
import App from './App';

reactdom.render(<App></App>, document.getElementById("root"));

App.js

import react, { useState } from 'react';

function App(){   
    const [txt, setTxt] = useState("");
    const [msg, setMsg] = useState("");
    function changeTxt(event){
        setTxt(event.target.value);                
    }   
    function displayMsg(event){
        setMsg(txt);          
        event.preventDefault();                         
    }
     
    return (
        <div className='container'>
            <form>
                <h1>Hello {msg}</h1>
                <input onChange={changeTxt} type="text" placeholder="Enter your text here.." ></input>
                <button onClick={displayMsg} id="submitBtn">Submit</button>
            </form>            
        </div>
    );
}

export default App;

And these are the screenshots of the outputs :
** Fig 1 : Initial Output that I have**

** Fig 2 : Output after I input some text and submit it**

Summary of the problem :
Basically I would like to clear the text from the input text field but still display the text along with ‘Hello’ .

Hoping for positive responses !!

[GeorgeCrisan]

Make the input a controlled one by setting a new attribute value={txt},

then inside displayMsg function do a call to setTxt(“”) so you clear the input state.
Make sure to add it after setMsg(txt);

That should work.

So:

<input onChange={changeTxt} value={txt} type="text" placeholder="Enter your text here.." ></input>

and

function displayMsg(event){
        event.preventDefault();  
         setMsg(txt);          
         setTxt("");                       
    }

!!! ALSO you have a problem there. import React not import react … that is case sensitive. that will break your app if not fixed.

[jyotirmoydas12]

Hey George, it worked like a charm ! Thank you so much… Learning from you guys is always a great experience… Thanks again !

[jyotirmoydas12]

!!! ALSO you have a problem there. import React not import react … that is case sensitive. that will break your app if not fixed.

George, would you kindly explain me the reason behind ? Because it is working well in small cases too.

[GeorgeCrisan]

So your elements are getting transformed by react to “React.createElement” so “React” capitalised has to be in scope.

If you imported “react” from “react” then your import is not getting used and something else is guarding this bug from happening. (JavaScript is case sensitive, just for the sake of experimentation remove the import completely, does it still work? )

I suspect that the environment and the version of the library you are using, prevent an issue in your end but that does not mean that import “react” from “react” is not wrong.

If you end up to work in another environment or in a legacy app this issue may end up to bite you.

Maybe this is your case https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Anyway, keep in mind that JS is case sensitive so react vs React or name vs Name are not the same thing.

[jyotirmoydas12]

Awesome !! Thanks George. I’ll keep that in mind.