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 ( 
  
    <div key={this.state.key}>
  
      <p>
      
        Input with default value:
        <input type="text" defaultValue={Date.now()} />
     
      </p>

      <p>
        Counter: {this.state.counter}
        <button onClick={this.updateCounter.bind( this )}>Update counter</button>
        <button onClick={this.updateCounterAndReset.bind( this )}>Update counter AND reset component</button>
        
      </p>
      
    </div>
  
  ); }
  
}

ReactDOM.render( <MyComponent />, document.querySelector( "#container" ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container" />

Answer 2

I've solved this by using both onBlur and onChange and only keeping track of the currently active input element in the state.

If there is a way to reset the module so that it re-displays the new default values then I'll mark that as correct.

state = {
  inFocusIndex: null,
  inFocusDisplayOrder: 0,
};


onOrderBlur() {
  const productRow = this.props.products[this.state.inFocusIndex];
  const oldDisplayORder = productRow.displayOrder;
  // This can change all the display order values in the products array
  this.props.updateDisplayOrder(
    this.props.groupId,
    productRow.productGroupLinkId,
    oldDisplayORder,
    this.state.inFocusDisplayOrder
  );
  this.setState({ inFocusIndex: null });
}

onOrderChanged(index, event) {
  this.setState({
    inFocusIndex: index,
    inFocusDisplayOrder: event.target.value,
  });
}

In the render function:

{this.props.products.map((row, index) => {
  return (
    <input
      type="text"
      value={index === this.state.inFocusIndex ? this.state.inFocusDisplayOrder : row.displayOrder}
      className={styles.displayOrder}
      onChange={this.onOrderChanged.bind(this, index)}
      onBlur={this.onOrderBlur.bind(this)} />
  );
})}