<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ekaradon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ekaradon">@ekaradon</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.9.2</li>
<li><strong>Node version:</strong> 6.2.0</li>
<li><strong>npm version:</strong> 3.9.3</li>
</ul>
<h3 dir="auto">Options</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;react-es6-webpack-boilerplate&quot;,
  &quot;version&quot;: &quot;4.0.0&quot;,
  &quot;description&quot;: &quot;Boilerplate for kick starting a React Project with ES6 (Babel) and Hot reloader using Webpack.&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;node server.js&quot;,
    &quot;build&quot;: &quot;BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js&quot;,
    &quot;lint&quot;: &quot;./node_modules/.bin/eslint .&quot;
  },
  &quot;repository&quot;: {
    &quot;type&quot;: &quot;git&quot;,
    &quot;url&quot;: &quot;https://github.com/vasanthk/react-es6-webpack-boilerplate.git&quot;
  },
  &quot;keywords&quot;: [
    &quot;react&quot;,
    &quot;es6&quot;,
    &quot;babel&quot;,
    &quot;webpack&quot;
  ],
  &quot;author&quot;: &quot;Vasanth Krishnamoorthy (http://www.vasanthk.com)&quot;,
  &quot;license&quot;: &quot;MIT&quot;,
  &quot;bugs&quot;: {
    &quot;url&quot;: &quot;https://github.com/vasanthk/react-es6-webpack-boilerplate/issues&quot;
  },
  &quot;homepage&quot;: &quot;https://github.com/vasanthk/react-es6-webpack-boilerplate&quot;,
  &quot;dependencies&quot;: {
    &quot;babel-runtime&quot;: &quot;^6.9.2&quot;,
    &quot;react&quot;: &quot;^15.1.0&quot;,
    &quot;react-dom&quot;: &quot;^15.1.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;babel-core&quot;: &quot;6.9.1&quot;,
    &quot;babel-eslint&quot;: &quot;6.0.4&quot;,
    &quot;babel-loader&quot;: &quot;6.2.4&quot;,
    &quot;babel-plugin-react-transform&quot;: &quot;2.0.2&quot;,
    &quot;babel-plugin-transform-react-constant-elements&quot;: &quot;6.9.1&quot;,
    &quot;babel-plugin-transform-runtime&quot;: &quot;6.9.0&quot;,
    &quot;babel-preset-es2015&quot;: &quot;6.9.0&quot;,
    &quot;babel-preset-react&quot;: &quot;6.5.0&quot;,
    &quot;babel-preset-stage-0&quot;: &quot;6.5.0&quot;,
    &quot;eslint&quot;: &quot;2.11.1&quot;,
    &quot;eslint-plugin-react&quot;: &quot;5.1.1&quot;,
    &quot;react-transform-hmr&quot;: &quot;1.0.4&quot;,
    &quot;webpack&quot;: &quot;1.13.1&quot;,
    &quot;webpack-dev-server&quot;: &quot;1.14.1&quot;
  }
}"><pre class="notranslate"><code class="notranslate">{
  "name": "react-es6-webpack-boilerplate",
  "version": "4.0.0",
  "description": "Boilerplate for kick starting a React Project with ES6 (Babel) and Hot reloader using Webpack.",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "build": "BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.production.js",
    "lint": "./node_modules/.bin/eslint ."
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/vasanthk/react-es6-webpack-boilerplate.git"
  },
  "keywords": [
    "react",
    "es6",
    "babel",
    "webpack"
  ],
  "author": "Vasanth Krishnamoorthy (http://www.vasanthk.com)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/vasanthk/react-es6-webpack-boilerplate/issues"
  },
  "homepage": "https://github.com/vasanthk/react-es6-webpack-boilerplate",
  "dependencies": {
    "babel-runtime": "^6.9.2",
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  },
  "devDependencies": {
    "babel-core": "6.9.1",
    "babel-eslint": "6.0.4",
    "babel-loader": "6.2.4",
    "babel-plugin-react-transform": "2.0.2",
    "babel-plugin-transform-react-constant-elements": "6.9.1",
    "babel-plugin-transform-runtime": "6.9.0",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-stage-0": "6.5.0",
    "eslint": "2.11.1",
    "eslint-plugin-react": "5.1.1",
    "react-transform-hmr": "1.0.4",
    "webpack": "1.13.1",
    "webpack-dev-server": "1.14.1"
  }
}
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
import React, {Component} from 'react';

const data = [1, 2, 3, 4];

function Bar({number}) {
    return &lt;div&gt;Number is {number}&lt;/div&gt;
}

function Foo({item}) {

    function give_number_through_a_fake_function() {
        return item;
    }

    function render_bug() {
        return (
            &lt;div&gt;
                &lt;div&gt;Here the bug&lt;/div&gt;
                &lt;Bar number={item}/&gt;
            &lt;/div&gt;
        );
    }

    return (
        &lt;div&gt;
            The bug will occur
            {render_bug()}
        &lt;/div&gt;
    );
}

function render_as_foo(item) {
    return &lt;Foo item={item}/&gt;;
}

export default class App extends Component {
    render() {
        return (
            &lt;div&gt;
                &lt;h1&gt;Hello, World!&lt;/h1&gt;
                {data.map(render_as_foo)}
            &lt;/div&gt;
        );
    }
}
"><pre class="notranslate"><code class="notranslate">
import React, {Component} from 'react';

const data = [1, 2, 3, 4];

function Bar({number}) {
    return &lt;div&gt;Number is {number}&lt;/div&gt;
}

function Foo({item}) {

    function give_number_through_a_fake_function() {
        return item;
    }

    function render_bug() {
        return (
            &lt;div&gt;
                &lt;div&gt;Here the bug&lt;/div&gt;
                &lt;Bar number={item}/&gt;
            &lt;/div&gt;
        );
    }

    return (
        &lt;div&gt;
            The bug will occur
            {render_bug()}
        &lt;/div&gt;
    );
}

function render_as_foo(item) {
    return &lt;Foo item={item}/&gt;;
}

export default class App extends Component {
    render() {
        return (
            &lt;div&gt;
                &lt;h1&gt;Hello, World!&lt;/h1&gt;
                {data.map(render_as_foo)}
            &lt;/div&gt;
        );
    }
}

</code></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">The props given in the example above (number) are consistently swallowed. They are undefined for the component <code class="notranslate">Bar</code> while it is defined in the component <code class="notranslate">Foo</code>. Furthermore, if using the function <code class="notranslate">give_number_through_a_fake_function</code> is used in order to give the props to the component <code class="notranslate">Bar</code>, then, it is working again.</p>
<p dir="auto">The case is reproducible, I have pushed the full example here:<br>
<a href="https://github.com/ekaradon/react-es6-webpack-boilerplate">https://github.com/ekaradon/react-es6-webpack-boilerplate</a></p>
<h3 dir="auto">Input Code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'
import ReactDOM from 'react-dom'

const GrandChildComp = ({ text }) =&gt; &lt;p&gt;{text}&lt;/p&gt;

const ChildComp = ({ text }) =&gt; {
    const foo = (() =&gt; &lt;GrandChildComp text={text} /&gt;)()
    return &lt;div&gt;{foo}&lt;/div&gt;
}

const ParentComp = () =&gt; &lt;ChildComp text=&quot;Hello World&quot; /&gt;

ReactDOM.render(&lt;ParentComp /&gt;, document.getElementById('root'))"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-v">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom'</span>

<span class="pl-k">const</span> <span class="pl-v">GrandChildComp</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> text <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">text</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>

<span class="pl-k">const</span> <span class="pl-v">ChildComp</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> text <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">foo</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-v">GrandChildComp</span> <span class="pl-c1">text</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">text</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-kos">)</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">foo</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-v">ParentComp</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-v">ChildComp</span> <span class="pl-c1">text</span><span class="pl-c1">=</span><span class="pl-s">"Hello World"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>

<span class="pl-v">ReactDOM</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-v">ParentComp</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></pre></div>
<h3 dir="auto">Babel Configuration (.bablerc, package.json, cli command)</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;plugins&quot;: [&quot;transform-react-constant-elements&quot;],
  &quot;presets&quot;: [&quot;react&quot;, &quot;latest&quot;],
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span><span class="pl-s">"transform-react-constant-elements"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span><span class="pl-s">"react"</span><span class="pl-kos">,</span> <span class="pl-s">"latest"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">or</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="babel src/index.js --presets 'react,latest' --plugins 'transform-react-constant-elements'"><pre class="notranslate">babel src/index.js --presets <span class="pl-s"><span class="pl-pds">'</span>react,latest<span class="pl-pds">'</span></span> --plugins <span class="pl-s"><span class="pl-pds">'</span>transform-react-constant-elements<span class="pl-pds">'</span></span></pre></div>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">React should render <code class="notranslate">&lt;div&gt;&lt;p&gt;Hello World&lt;/p&gt;&lt;/div&gt;</code></p>
<h3 dir="auto">Current Behavior</h3>
<p dir="auto">Instead, React renders <code class="notranslate">&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;</code></p>
<h3 dir="auto">Context</h3>
<p dir="auto"><code class="notranslate">const foo = (() =&gt; &lt;GrandChildComp text={text} /&gt;)()</code> gets screwed up here because of parameter destructuring.</p>
<p dir="auto">Here's the important lines: <a href="https://gist.github.com/kaatt/794b7f306449dc605aaec6ff58edb372#file-with-constant-elements-js-L25-L27">https://gist.github.com/kaatt/794b7f306449dc605aaec6ff58edb372#file-with-constant-elements-js-L25-L27</a></p>
<p dir="auto">So, it works fine if you replace <code class="notranslate">const ChildComp = ({ text }) =&gt; {</code> with</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ChildComp = (props) =&gt; {
  const { text } = props
// ..."><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">ChildComp</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span> text <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span>
<span class="pl-c">// ...</span><span class="pl-kos"></span></pre></div>
<h3 dir="auto">Your Environment</h3>
<table role="table">
<thead>
<tr>
<th>software</th>
<th>version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Babel</td>
<td>^6.9.1</td>
</tr>
<tr>
<td>node</td>
<td>6.3.0</td>
</tr>
<tr>
<td>npm</td>
<td>3.10.3</td>
</tr>
</tbody>
</table>