CODEWITHSUNDEEP
reactjs
Kam
Kam

Reputation: 63

Can't clear input field after pressing button

class CategoryBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newCategoryTitle: '',
      errorMsg: null,
      updateCategoryTitle: '',
    };
    this.handleCreateCategory = this.handleCreateCategory.bind(this);
    this.handleUpdateCategory = this.handleUpdateCategory.bind(this);
  }
  ...
  ...
  handleUpdateCategory(e) {
    e.preventDefault();
    this.setState({
      updateCategoryTitle: ''
    });
  }
  render() {
    return (
    //...
    <form>
      <input
        type={'text'}
        className={styles.tabSmallField}
        placeholder={ category.name }
        onChange={(e) => { this.setState({ updateCategoryTitle: e.target.value }); }} />
      <button type="submit" onClick={this.handleUpdateCategory}>Update</button>
    </form>
    //...
  }
}

I want to clear input text field after pressing the button.

It looks like it enters into "handleUpdateCategory(e)" after pressing the button. But it does not clear the input field above the button.

How can I clear the input text field?

Upvotes: 0

Views: 75

Answers (1)

Kam
Kam

Reputation: 63

Answer is in comment.

It didn't clear because you never bind the state value to your <input>. Change it like this <input value={this.state.updateCategoryTitle} ...other props... />

Upvotes: 2

Related Questions