title: Why local variables in React functional component?
body: <p>I have generated a functional component to make the parent component readable and better structured.</p>
  
  <p>The following does not work, that is: the condition never holds although console.log prints showed the required values.</p>
  
  <pre><code>const UpdateIcons = ({products, move2Program, onSaveTable}) =&gt; {
  
  //the condition never fires even if console.log shows A, B, C as expected
  
      if (products['intake_mgr_decision'] === 'A' 
           &amp;&amp; products['intake_family_decision'] === 'B' 
           &amp;&amp;  products['intake_status'] === 'C')
              return &lt;button type="button"  className="btn btn-success pull-left" 
                          onClick={move2Program}&gt;JOIN&lt;/button&gt;
  
      return &lt;button type="button"  className="btn btn-success pull-left" 
                          onClick={onSaveTable}&gt;UPDATE&lt;/button&gt;
    }
  </code></pre>
  
  <p>Adding local variables solved the problem.</p>
  
  <p><strong>My question is WHY? What's the explanation?</strong></p>
  
  <p>The following works</p>
  
  <pre><code>const UpdateIcons = ({products, move2Program, onSaveTable}) =&gt; {
  
      let mgr_decision = products['intake_mgr_decision']
      let family_decision = products['intake_family_decision']
      let status = products['intake_status']
  
      if (mgr_decision === 'A' &amp;&amp;  family_decision === 'B' &amp;&amp;  status === 'C')
              return &lt;button type="button"  className="btn btn-success pull-left" 
                          onClick={move2Program}&gt;JOIN&lt;/button&gt;
  
      return &lt;button type="button"  className="btn btn-success pull-left" 
                          onClick={onSaveTable}&gt;UPDATE&lt;/button&gt;
    }
  </code></pre>