title: How to reassign Ref objects in React
body: <p>I am trying to fix part of a project where I do not have control over how they are using refs. Currently there are Editable text elements that are being controlled by using refs and a state varible in the component holding all of these refs. I am trying to implement a cancel button which resets the edited fields to their orginal default value.</p>
  
  <p>I have tried using the blow code to accomplish this by replacing, the edited value which seems to be stored in ref.state.value with the original value, stored in ref.props.defaultValue</p>
  
  <p>this.state.refs is defined as</p>
  
  <pre><code>refs: Array&lt;EditableText | null&gt;;
  </code></pre>
  
  <p>editable text: <a href="https://blueprintjs.com/docs/#core/components/editable-text" rel="nofollow noreferrer">https://blueprintjs.com/docs/#core/components/editable-text</a></p>
  
  <p>Editable Text components with refs:</p>
  
  <pre><code>&lt;EditableText
     disabled={!this.state.editingDesc}
     multiline={true}
     maxLines={10}
     defaultValue={description}
     ref={input =&gt;
       (this.state.refs[index + 1] = input)
     }
  /&gt;
  </code></pre>
  
  <p>Function with error</p>
  
  <pre><code>public handleCancelBtn = () =&gt; {
      const newRefs = this.state.refs.map(ref =&gt; {
        if (ref != null) {
          const originalValue = ref.props.defaultValue;
          const newState = { ...ref.state, value: originalValue };
          const newRef = { ...ref, state: newState };
          return newRef;
        }
        return null;
      });
      this.setState({
        editingDesc: false,
        refs: newRefs
      });
    };
  </code></pre>
  
  <p>The problem is that the compilier is saying that I can't assign newRefs to ref since I am missing properties to make them an edited text element, such as render, componentDidMount etc. I am not understanding why the spread operator is not taking care of copying everything from the original ref. I do not know much about refs though and cannot find much relevant documentation for this use case. I do wish I could refactor this whole component to use state instead, sadly I will have to wait on that. If anyone could give me some help, I will be very appreciative. Thank you.</p>