title: JSX for...in loop
body: <p>Given this object:</p>
  
  <pre><code>lst socials = {
    foo: 'http://foo'
  }
  </code></pre>
  
  <p>I want to loop through it in JSX. This works:</p>
  
  <pre><code>let socialLinks = []
  let socialBar
  for (let social in socials) {
    socialLinks.push(&lt;li&gt;
                       &lt;a alt={social} href={socials[social]}&gt;{ social }&lt;/a&gt;
                     &lt;/li&gt;)
  }
  if (socialLinks) {
    socialBar = &lt;div className='align-bottom text-center'&gt;
                  &lt;ul className='list-inline social-list mb24'&gt;
                    {socialLinks}
                  &lt;/ul&gt;
                &lt;/div&gt;
  }
  </code></pre>
  
  <p>But this doesn't (social undefined):</p>
  
  <pre><code>let socialBar
  if (socials) {
    socialBar = &lt;div className='align-bottom text-center'&gt;
                  &lt;ul className='list-inline social-list mb24'&gt;
                    for(let social in socials)
                    {&lt;li&gt;
                       &lt;a alt={social} href={socials[social]}&gt;{ social }&lt;/a&gt; // social is undefined
                     &lt;/li&gt;}
                  &lt;/ul&gt;
                &lt;/div&gt;
  }
  </code></pre>
  
  <p>What is the reason <code>social</code> is undefined in the 2nd example? I assume there is a scoping issue with the inner brackets but I have not been successful fixing it.</p>
  
  <p>I can do do a <code>forEach</code> with object keys and do as in this <a href="https://stackoverflow.com/questions/22876978/loop-inside-react-jsx">post</a> but that's not much different than my working example.</p>
  
  <p>To be clear - I have it working, I simply wish to be clearer on the scoping problem (or syntax error if so) in my 2nd example.</p>