[TextField] uniqueId breaks server rendering

Problem Description

The unique ID that is generated on textfields seems to break server rendering. The generated html looks like this:

<input
  name="query"
  id="query-MerchantEmailAddress-undefined-19669"
  style="-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;position:relative;width:100%;height:100%;border:none;outline:none;background-color:rgba(0,0,0,0);color:rgba(255, 255, 255, 1);font:inherit;mui-prepared:;"
  type="text"
  data-reactid=".s5vj4rstmo.0.$=10=2$=011.$=10.1.0.$=10.2"
>

I am getting the standard react checksum error:

warning.js:45 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ilAddress-undefined-19669" style="-webki
 (server) ilAddress-undefined-46463" style="-webki

Versions

• Material-UI: 0.15.0-alpha.2
• React: 0.14.7
• Browser: Chrome

[oliviertassinari]

@nathanmarks have made the link between the label and the input more explicit on the next branch. E.g.

<TextField>
  <TextFieldLabel htmlFor="name">
    Name
  </TextFieldLabel>
  <TextFieldInput
    id="name"
    value={this.state.value}
    onChange={(event) => this.setState({ value: event.target.value })}
  />
</TextField>

Making the link more explicit allow us to remove the magic uniqueId generation. And solve the server-side rendering issue. I’m closing this issue as well as https://github.com/callemall/material-ui/pull/4253.

[petermikitsh]

Adding to @halt-hammerzeit’s comment, adding an id prop to TextField solved the issue for me.