title: Prop mismatch server/client, how to generate a unique ID that persists?
body: <p>I'm using ReactJS.net with server rendering. I want to make a simple component that outputs a label and an input where the label references the input via the htmlFor property. Since this component could be used multiple times on the same page I need it to have a unique ID for every instance of the component.</p>
  
  <p>Thus I generate a guid in the constructor and use that - which works fine except that the ID gets generated both on the server side and then on the client side which leads to a mismatch of values.</p>
  
  <p>How can I solve this mismatch?</p>
  
  <p>Example code:</p>
  
  <pre><code>interface IProps { whatever:string }
  
  export default class Test extends React.Component&lt;IProps&gt; {
      private _guid: string;
  
      constructor(props: IProps) {
          super(props);
          this._guid = Utils.getGuid(); // generates a new guid
      }
  
      render(): JSX.Element {
          return (
              &lt;div&gt;
                  &lt;label htmlFor={this._guid}A nice label&lt;/label&gt;
                  &lt;input id={this._guid} type="text" /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Code will run and work but will generate a warning:</p>
  
  <p>Warning: Prop <code>htmlFor</code> did not match. Server: "87d61dbe-b2a8-47bd-b299- 
  c6e80445f626" Client: "f0297b42-7781-48a4-9904-75b8fd2d1140"</p>