Reset initial state in React + ES6

Question

I have a class, ElementBuilder below, and when the user saves the Element they've built, I want the state to reset to the values below.

I have some functions in this class that I haven't provided but that change the state of title, size, and color.

In ES 5, I would have a getInitialState function on my class and could call this.getInitialState() in a function.

This element lives in my app for the lifecycle of a logged in user and I want the default values to always be the same regardless of past usage.

How do I achieve this without writing a function that sets an object of default values (or maybe that's the answer)? thanks!

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = {
            title: 'Testing,
            size: 100,
            color: '#4d96ce',
        };
    }

    resetBuilder() {
        this.setState({ this.getInitialState() });
    }
}

Answer 1

You may use a getter function:

class ElementBuilder extends Component {
  constructor(props) {
    super(props);

    this.state = this.initialState;
  }

  get initialState() {
    return {
      title: 'Testing',
      size: 100,
      color: '#4d96ce',
    };
  }

  resetBuilder() {
    this.setState(this.initialState);
  }
}

or just a variable:

constructor(props) {
  super(props);

  this.initialState = {
    title: 'Testing',
    size: 100,
    color: '#4d96ce',
  };
  this.state = this.initialState;
}