How to 'reset' a ReactJS element?

Question

I'm trying to 'reset' a ReactJS element.

In this case, the element is 90%+ of the contents of the page.

I'm using replaceState to replace the state of the element with with its initial state.

Unfortunately, sub-elements which have their own 'state' do not reset. In particular, form fields keep their contents.

Is there a way of forcing a re-render of an element, which will also cause sub-elements to re-render, as if the page had just loaded?

Answer 1

Adding a key to the element forces the element (and all its children) to be re-rendered when that key changes.

(I set the value of 'key' to simply the timestamp of when the initial data was sent.)

render: function() {
  return (
    <div key={this.state.timestamp} className="Commissioning">
      ...

Answer 2

The this.replaceState(this.getInitialState()) method doesn't actually reset children that are inputs, if that's what you're looking for. For anyone looking to just reset their form fields, there is a standard DOM reset() function that will clear all the inputs in a given element.

So with React, it'd be something like this:

this.refs.someForm.getDOMNode().reset();

Doumentation:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

Answer 3

If it is a form you want to reset, you simply can use this

// assuming you've given {ref: 'form'} to your form element
React.findDOMNode(this.refs.form).reset();