<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The controlled/uncontrolled behavior is determined at the mount time.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The controlled/uncontrolled behavior is determined at each render.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Look at the source code.</p>
<h2 dir="auto">Context</h2>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kgregory/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/kgregory">@kgregory</a> Raised this issue in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="282672012" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/9523" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/9523/hovercard" href="https://github.com/mui/material-ui/pull/9523">#9523</a>. It's important to notice that the <code class="notranslate">Input</code> component is the only component behaving this way. It's no the case for: <code class="notranslate">input</code>, <code class="notranslate">Checkbox</code>, <code class="notranslate">Switch</code>, <code class="notranslate">Radio</code>, <code class="notranslate">ExpansionPanel</code> and <code class="notranslate">Tooltip</code>.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.24</td>
</tr>
<tr>
<td>React</td>
<td>v16.2.0</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The GridListTile should look the same when wrapped in a component as when it's not wrapped.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Wrapping GridListTile in a component collapses it, it does not fill out up the space it should.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Here is a demo: <a href="https://stackblitz.com/edit/react-ershgc" rel="nofollow">https://stackblitz.com/edit/react-ershgc</a><br>
Output here: <a href="https://react-ershgc.stackblitz.io/" rel="nofollow">https://react-ershgc.stackblitz.io/</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2538130/35165759-59900558-fd04-11e7-833e-e8f7d6131712.png"><img src="https://user-images.githubusercontent.com/2538130/35165759-59900558-fd04-11e7-833e-e8f7d6131712.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<ol dir="auto">
<li>
<p dir="auto">I would like to be able to have onclick pass back the id of the clicked GridListTile without using a wrapper arrow function for the GridListTile onClick prop. Using a wrapper function created a new function on every re-render of the main component, which causes an update to each GridListTile.</p>
</li>
<li>
<p dir="auto">Also having a wrapper component for GridListTile enables me to optimize renders with PureComponent/shouldComponentUpdate/onlyUpdateForKeys etc.</p>
</li>
</ol>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.29</td>
</tr>
<tr>
<td>React</td>
<td>Latest</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome, Mac, latest</td>
</tr>
</tbody>
</table>
<p dir="auto">I am not sure if StackBlitz deletes demo apps after some period of time so pasting the code here too, just in case:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/*
  Experiment with moving GridListTile to it's own component.

  The reason for wanting this is to avoid using anonymous functions in the 
  GridListTile props. Generating functions makes every GridListTile update 
  on every update to 'list', shouldComponent update or PureComponent will 
  also re-render since the passed onClick function technically differs from 
  the previous one.
*/

import React, {Component} from 'react';
import {render} from 'react-dom';
import GridList, {GridListTile} from 'material-ui/GridList';

const list = ['id1', 'id2', 'id3'];

class App extends Component {
  handleClick = (event, id) =&gt; {
    console.log('id', id);
  };

  render() {
    return (
      &lt;GridList cellHeight={192} cols={3}&gt;
        {list.map(id =&gt; (
          &lt;GridListTile
            // An anonymous event handler is needed to be able to pass
            // 'id' to the actual event handler
            onClick={event =&gt; this.handleClick(event, id)}
            key={id}
            cols={1}
            style={{background: 'red'}}
          &gt;
            {id}
          &lt;/GridListTile&gt;
        ))}

        {/*
          Wrapping GridListTile in a separate component solves the event
          handler issue, but this does also not render as expected
        */}
        {list.map(id =&gt; &lt;MyTile key={id} id={id} onClick={this.handleClick} /&gt;)}
      &lt;/GridList&gt;
    );
  }
}

class MyTile extends Component {
  handleClick = event =&gt; {
    // Passing the id without using an anonymous function in the JSX props
    this.props.onClick(event, this.props.id);
  };

  render() {
    return (
      &lt;GridListTile cols={1} style={{background: 'green'}} onClick={this.handleClick}&gt;
        {this.props.id}
      &lt;/GridListTile&gt;
    );
  }
}

render(&lt;App /&gt;, document.getElementById('root'));"><pre class="notranslate"><span class="pl-c">/*</span>
<span class="pl-c">  Experiment with moving GridListTile to it's own component.</span>
<span class="pl-c"></span>
<span class="pl-c">  The reason for wanting this is to avoid using anonymous functions in the </span>
<span class="pl-c">  GridListTile props. Generating functions makes every GridListTile update </span>
<span class="pl-c">  on every update to 'list', shouldComponent update or PureComponent will </span>
<span class="pl-c">  also re-render since the passed onClick function technically differs from </span>
<span class="pl-c">  the previous one.</span>
<span class="pl-c">*/</span>

<span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">render</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">GridList</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-v">GridListTile</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/GridList'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">list</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'id1'</span><span class="pl-kos">,</span> <span class="pl-s">'id2'</span><span class="pl-kos">,</span> <span class="pl-s">'id3'</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">App</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">handleClick</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">,</span> <span class="pl-s1">id</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'id'</span><span class="pl-kos">,</span> <span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">GridList</span> <span class="pl-c1">cellHeight</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">192</span><span class="pl-kos">}</span> <span class="pl-c1">cols</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">3</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-s1">list</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">id</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">GridListTile</span>
            <span class="pl-c">// An anonymous event handler is needed to be able to pass</span>
            <span class="pl-c">// 'id' to the actual event handler</span>
            <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">handleClick</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">,</span> <span class="pl-s1">id</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
            <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">id</span><span class="pl-kos">}</span>
            <span class="pl-c1">cols</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span>
            <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">background</span>: <span class="pl-s">'red'</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
          <span class="pl-c1">&gt;</span>
            <span class="pl-kos">{</span><span class="pl-s1">id</span><span class="pl-kos">}</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">GridListTile</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">}</span>

        <span class="pl-kos">{</span><span class="pl-c">/*</span>
<span class="pl-c">          Wrapping GridListTile in a separate component solves the event</span>
<span class="pl-c">          handler issue, but this does also not render as expected</span>
<span class="pl-c">        */</span><span class="pl-kos">}</span>
        <span class="pl-kos">{</span><span class="pl-s1">list</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">id</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">MyTile</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">id</span><span class="pl-kos">}</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">id</span><span class="pl-kos">}</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleClick</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">GridList</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">MyTile</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">handleClick</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Passing the id without using an anonymous function in the JSX props</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-en">onClick</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">GridListTile</span> <span class="pl-c1">cols</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span> <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">background</span>: <span class="pl-s">'green'</span><span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleClick</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">GridListTile</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'root'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>