title: Override prop on component instance in React
body: <p>If a component has an existing prop being passed to it, how can I override this in a HOC. The following will display <code>bar</code> and not <code>changed</code>, which makes sense from an application standpoint.</p>
  
  <pre><code>class App extends React.PureComponent {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
          &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
          {this.props.foo}
        &lt;/div&gt;
      );
    }
  }
  
  const App2 = props =&gt; &lt;App {...props} foo={"bar"} /&gt;;
  const App3 = props =&gt; &lt;App2 {...props} foo={"changed"} /&gt;;
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App3 /&gt;, rootElement);
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/k015wplr6o" rel="nofollow noreferrer">https://codesandbox.io/s/k015wplr6o</a></p>
  
  <p>This is part of a larger application where an instance of a component is stored, and later the instance must be recreated with a different value as a prop.</p>