How do I reset the defaultValue for a React input

Question

I have a set of React input elements that have a defaultValue set. The values are updated with an onBlur event.

I also have another action on the page that updates

Answer 1

As mentioned in https://stackoverflow.com/a/21750576/275501, you can assign a key to the outer element of your rendered component, controlled by state. This means you have a "switch" to completely reset the component because React considers a new key to indicate an entirely new element.

e.g.

class MyComponent extends React.Component {
  
  constructor() {
  
    super();
    this.state = { 
    
      key: Date.now(),
      counter: 0
      
    };
    
  }
  
  updateCounter() {
  
    this.setState( { counter: this.state.counter + 1 } );
    
  }
  
  updateCounterAndReset() {
  
    this.updateCounter();
    this.setState( { key: Date.now() } );
    
  }
  
  render() { return ( 
  
    

  
      

      
        Input with default value:
        
     
      

      

        Counter: {this.state.counter}
        Update counter
        Update counter AND reset component
        
      
      
    
  
  ); }
  
}

ReactDOM.render( , document.querySelector( "#container" ) );