React TypeScript: How to clear an input field

Question

const emailInput = document.getElementById("loginEmail");
emailInput.value = ''
...
<input
  id="loginEmail"
  value={state.email}
  type="input" 
  className="input-text" 
  name="email" 
  placeholder={txt.emailAddress}
  onChange={formValue}
></input>

The error I'm getting on line 2 in the example above is `Property 'value' does not exist on type 'HTMLElement'.ts(2339)

`

Przemek Struciński · Accepted Answer · 2019-09-14 08:14:01Z

2

This is how you should control the value of input in React

<input
  id="loginEmail"
  value={this.state.email}  
  type="input" 
  className="input-text" 
  name="email" 
  placeholder={txt.emailAddress}
  onChange={formValue}
></input>

In order to clear a value:

this.setState({
  email: ''
});

answered Sep 14, 2019 at 8:14

Przemek Struciński

5,2381 gold badge32 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 0 · Accepted Answer · 2019-09-14 08:43:12Z

0

You have to assign the value for input element. To clear the value just reset the state variable.

this.setState({ email: "" });

Here is the small code for you

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: "Clue Mediator"
    };
    this.onInputChange = this.onInputChange.bind(this);
    this.clearInput = this.clearInput.bind(this);
  }

  clearInput() {
    this.setState({ inputVal: "" });
  }

  // handle input change event
  onInputChange(e) {
    this.setState({ inputVal: e.target.value });
  }

  render() {
    return (
      <>
        <input
          placeholder="Enter your value here..."
          value={this.state.inputVal}
          onChange={this.onInputChange}
        />
        <input type="button" value="clear" onClick={this.clearInput} />
      </>
    );
  }
}

Here is the working demo for you
https://codesandbox.io/s/autumn-darkness-rybj2

Hope this will work for you!

edited Sep 14, 2019 at 8:43

answered Sep 14, 2019 at 8:06

user11910739

3 Comments

Bill Over a year ago

the value is whatever the user types, so how do i assign it?

user11910739 Over a year ago

If you are work with reactjs then create state variable and assign in value. Check my updated answer for it.

user11910739 Over a year ago

Here is the working demo for you codesandbox.io/s/autumn-darkness-rybj2. I have updated in my answer.

Collectives™ on Stack Overflow

React TypeScript: How to clear an input field

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related