<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/callemall/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">I would expect that when I programmatically set the value of the multiline TextField to '', the text inside it would disappear.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Currently, the previous value inside the multiline TextField is NOT being cleared after setting the value to ''.</p>
<h2 dir="auto">Steps to Reproduce</h2>
<p dir="auto">You can directly reproduce the bug here: <a href="https://codesandbox.io/s/wwpojv800k" rel="nofollow">https://codesandbox.io/s/wwpojv800k</a></p>
<ol dir="auto">
<li>Type something in the multiline TextField.</li>
<li>Press the Reset button</li>
</ol>
<p dir="auto">Results:<br>
The content of the multiline TextField is not cleared.</p>
<p dir="auto">Here is a very simple component you can directly add to your code to reproduce the bug:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';

class Test extends React.Component {
    constructor() {
        super();

        this.state = {
            content: '',
        };
    }

    handleChange() {
        return (event) =&gt; {
            this.setState({content: event.target.value});
        };
    }

    resetContent() {
        this.setState({content: ''});
    }

    render() {
        return (
            &lt;div&gt;
                &lt;TextField onChange={this.handleChange()} value={this.state.content} rows='5' rowsMax='5' label='Content' multiline fullWidth/&gt;
                &lt;Button raised onClick={this.resetContent.bind(this)}&gt;Reset&lt;/Button&gt;
            &lt;/div&gt;
        );
    }
}

export default Test;"><pre class="notranslate"><code class="notranslate">import React from 'react';
import TextField from 'material-ui/TextField';
import Button from 'material-ui/Button';

class Test extends React.Component {
    constructor() {
        super();

        this.state = {
            content: '',
        };
    }

    handleChange() {
        return (event) =&gt; {
            this.setState({content: event.target.value});
        };
    }

    resetContent() {
        this.setState({content: ''});
    }

    render() {
        return (
            &lt;div&gt;
                &lt;TextField onChange={this.handleChange()} value={this.state.content} rows='5' rowsMax='5' label='Content' multiline fullWidth/&gt;
                &lt;Button raised onClick={this.resetContent.bind(this)}&gt;Reset&lt;/Button&gt;
            &lt;/div&gt;
        );
    }
}

export default Test;
</code></pre></div>
<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.13</td>
</tr>
<tr>
<td>React</td>
<td>15.6.1</td>
</tr>
<tr>
<td>browser</td>
<td>Firefox 56.0 (32-bit), Firefox Dev Edition 57.0b5 (64-bit), Chrome 61.0.3163.100 (64 bit)</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/callemall/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">I should be able to somehow use a <code class="notranslate">&lt;ListItem&gt;</code> with a <code class="notranslate">Link</code> in TypeScript.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">I've found a few examples that suggest using:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ListItem button component={Link} to=&quot;/somelink&quot;&gt;&lt;/ListItem&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-smi">ListItem</span> <span class="pl-c1">button</span> <span class="pl-c1">component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">Link</span><span class="pl-kos">}</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/somelink"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">ListItem</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">But I use TypeScript, and using <code class="notranslate">to</code> attr throws a compilation error since <code class="notranslate">to</code> is not a property of <code class="notranslate">ListItem</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Use <code class="notranslate">create-react-app my-app --scripts-version=react-scripts-ts</code> to create a simple react app with TS</li>
<li>Add <code class="notranslate">react-router</code> as dep and install it</li>
<li>Use a <code class="notranslate">List</code> in the app template and try to add an item with <code class="notranslate">&lt;ListItem button component={Link} to="/somelink"&gt;&lt;/ListItem&gt;</code></li>
</ol>
<h2 dir="auto">Context</h2>
    
<p dir="auto">I'm trying to setup Material UI with react-router.</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>next</td>
</tr>
<tr>
<td>React</td>
<td>16.1.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>