Clearing input fields with React

Question

I am confused about why I cannot clear <input> field values using this simple pattern with React:

onComponentDidMount: function () {
    this.clearFields();
},

clearFields: function () {
    document.getElementById('username_field').value = '';
    document.getElementById('password_field').value = '';
},

I don't think it's a problem with React, I think there some other issue at hand but I am not sure what's going on. But the fields definitely do not clear out. Later on, I can call this.clearFields() and that function does work as expected, but not when the component first mounts.

dannyjolie · Accepted Answer · 2016-03-23 21:59:12Z

2

The correct React lifecycle function is called componentDidMount, not onComponentDidMount

However, you don't want to do it this way if the inputs are also rendered with React. It's usually better and more relevant to the application to change values stored in the state, and let the render function deal with setting the value of the input fields.

answered Mar 23, 2016 at 21:59

dannyjolie

11.4k3 gold badges35 silver badges28 bronze badges

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

1 Comment

omarjmh Over a year ago

agreed you should be doing this in getInitialState, and this.setState({}); when it comes to react

Collectives™ on Stack Overflow

Clearing input fields with React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related