How can I reset a single state prop to its initial values

Question

I have a react component that contains the following constructor:

constructor (props) {
  super(props);
  this.state = {
    stage: TIMER_PREPARED,
    remaining: this.props.seconds,
    flashNotification: {
      message: null,
      shown: false,
      code: null,
    }
  };
}

At a certain point during the app lifecycle I need to reset the flashNotification props to their initial state.

Is there a way to do that without resetting the rest of the props? Meaning, without using:

this.setState({flashNotification: {
      message: null,
      shown: false,
      code: null,
    }})

Answer 1

Just initialize flashNotification using a factory function:

class Comp extends React.Component {
  constructor(props) {
    super(props);   

    this.state = {
      stage: TIMER_PREPARED,
      remaining: this.props.seconds,
      flashNotification: this.createFlashNotification()
    };  
  }

  reset() {
    this.setState({ flashNotification: this.createFlashNotification() });
  }

  createFlashNotification() {
    return {
      message: null,
      shown: false,
      code: null
    }
  }    
}

Answer 2

To reset flashNotification to a base value. You can store the object on this , and clone it whenever you want to reset:

class Comp extends React.Component {
  constructor(props) {
    super(props);

    this.flashNotification = Object.freeze({ // Object.freeze is used to prevent changes to the base object
      message: null,
      shown: false,
      code: null,
    });

    this.state = {
      stage: TIMER_PREPARED,
      remaining: this.props.seconds,
      flashNotification: Object.assign({}, this.flashNotification) // cloning the object
    };

    this.reset = this.reset.bind(this);
  }

  reset() {
    this.setState({ flashNotification: Object.assign({}, this.flashNotification })// cloning the object
  }
}

Answer 3

What I would do is keep a copy of the initial State in a class object and then reset it whenever necessary like

constructor (props) {
  super(props);
  this.baseFlashNotification = {
      message: null,
      shown: false,
      code: null,
    }

  this.state = {
    stage: TIMER_PREPARED,
    remaining: this.props.seconds,
    flashNotification: Object.assign({}, this.baseFlashNotification)
  };
}

and reset as

  this.setState({flashNotification: this.baseFlashNotification})