<p dir="auto">The Collapse component's <code class="notranslate">onEntered</code> prop is not destructured in the render method. So the <code class="notranslate">onEntered</code> prop is spread into the Transition component through <code class="notranslate">...other</code>, thereby overwriting the Collapse components <code class="notranslate">this.handleEntered</code> method as the <code class="notranslate">onEntered</code> prop to Transition. So <code class="notranslate">this.handleEntered</code> is never invoked.</p>


<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"><code class="notranslate">onEntered</code> should be destructured out of <code class="notranslate">this.props</code> so it is not included in <code class="notranslate">...other</code>. Collapse <code class="notranslate">handleEntered</code> method should get invoked.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Collapse <code class="notranslate">handleEntered</code> method is never invoked.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Try to <code class="notranslate">console.log</code> something in Collapse <code class="notranslate">handleEntered</code> method and it will not log.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  render() {
    const {
      children,
      classes,
      onEnter,
      onEntering, // &lt;-- onEntered prop should be destructured somewhere here
      onExit,
      onExiting,
      transitionDuration,
      theme,
      ...other
    } = this.props;

    return (
      &lt;Transition
        onEntering={this.handleEntering}
        onEnter={this.handleEnter}
        onEntered={this.handleEntered}
        enteredClassName={classes.entered}
        onExiting={this.handleExiting}
        onExit={this.handleExit}
        onRequestTimeout={this.handleRequestTimeout}
        {...other}  // &lt;-- onEntered prop overwriting this.handleEntered
      &gt;"><pre class="notranslate">  <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">const</span> <span class="pl-kos">{</span>
      children<span class="pl-kos">,</span>
      classes<span class="pl-kos">,</span>
      onEnter<span class="pl-kos">,</span>
      onEntering<span class="pl-kos">,</span> <span class="pl-c">// &lt;-- onEntered prop should be destructured somewhere here</span>
      onExit<span class="pl-kos">,</span>
      onExiting<span class="pl-kos">,</span>
      transitionDuration<span class="pl-kos">,</span>
      theme<span class="pl-kos">,</span>
      ...<span class="pl-s1">other</span>
    <span class="pl-kos">}</span> <span class="pl-c1">=</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-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Transition</span>
        <span class="pl-c1">onEntering</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">handleEntering</span><span class="pl-kos">}</span>
        <span class="pl-c1">onEnter</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">handleEnter</span><span class="pl-kos">}</span>
        <span class="pl-c1">onEntered</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">handleEntered</span><span class="pl-kos">}</span>
        <span class="pl-c1">enteredClassName</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">entered</span><span class="pl-kos">}</span>
        <span class="pl-c1">onExiting</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">handleExiting</span><span class="pl-kos">}</span>
        <span class="pl-c1">onExit</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">handleExit</span><span class="pl-kos">}</span>
        <span class="pl-c1">onRequestTimeout</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">handleRequestTimeout</span><span class="pl-kos">}</span>
        <span class="pl-kos">{</span>...<span class="pl-s1">other</span><span class="pl-kos">}</span>  <span class="pl-c">// &lt;-- onEntered prop overwriting this.handleEntered</span>
      <span class="pl-c1">&gt;</span></pre></div>
<h2 dir="auto">Context</h2>
    
<p dir="auto">I was trying to invoke a call back that helps measure dom elements in Collapse <code class="notranslate">onEntered</code>. I realized it was not being called in the Collapse method because the <code class="notranslate">element</code> did not have the style values that are assigned in that method.</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>1.0.0-beta.12</td>
</tr>
<tr>
<td>React</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">The following code snippet:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="React.createElement&lt;SvgIconProps&gt;(icon, { classes: { root: classes.nonActiveColor }});"><pre class="notranslate"><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">createElement</span><span class="pl-c1">&lt;</span><span class="pl-v">SvgIconProps</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-s1">icon</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">classes</span>: <span class="pl-kos">{</span> <span class="pl-c1">root</span>: <span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">nonActiveColor</span> <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">returns the following type error:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(36,60): error TS2345: Argument of type '{ classes: { root: string; }; }' is not assignable to parameter of type '(Attributes &amp; SvgIconProps) | undefined'.
  Object literal may only specify known properties, and 'classes' does not exist in type '(Attributes &amp; SvgIconProps) | undefined'."><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-c1">36</span><span class="pl-kos">,</span><span class="pl-c1">60</span><span class="pl-kos">)</span>: <span class="pl-s1">error</span> TS2345: <span class="pl-v">Argument</span> <span class="pl-s1">of</span> <span class="pl-s1">type</span> '<span class="pl-kos">{</span> classes: <span class="pl-kos">{</span> root: <span class="pl-s1">string</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-s">' is not assignable to parameter of type '</span><span class="pl-kos">(</span><span class="pl-v">Attributes</span> <span class="pl-c1">&amp;</span> <span class="pl-v">SvgIconProps</span><span class="pl-kos">)</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span><span class="pl-s">'.</span>
<span class="pl-s">  Object literal may only specify known properties, and '</span><span class="pl-s1">classes</span><span class="pl-s">' does not exist in type '</span><span class="pl-kos">(</span><span class="pl-v">Attributes</span> <span class="pl-c1">&amp;</span> <span class="pl-v">SvgIconProps</span><span class="pl-kos">)</span> <span class="pl-c1">|</span> <span class="pl-c1">undefined</span>'.</pre></div>
<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>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td><code class="notranslate">v1-beta.9</code></td>
</tr>
</tbody>
</table>