Yashua Yashua - 2 months ago 20
React JSX Question

JSX for...in loop

Given this object:

lst socials = {
foo: 'http://foo'
}


I want to loop through it in JSX. This works:

let socialLinks = []
let socialBar
for (let social in socials) {
socialLinks.push(<li>
<a alt={social} href={socials[social]}>{ social }</a>
</li>)
}
if (socialLinks) {
socialBar = <div className='align-bottom text-center'>
<ul className='list-inline social-list mb24'>
{socialLinks}
</ul>
</div>
}


But this doesn't (social undefined):

let socialBar
if (socials) {
socialBar = <div className='align-bottom text-center'>
<ul className='list-inline social-list mb24'>
for(let social in socials)
{<li>
<a alt={social} href={socials[social]}>{ social }</a> // social is undefined
</li>}
</ul>
</div>
}


What is the reason
social
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.

I can do do a
forEach
with object keys and do as in this post but that's not much different than my working example.

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.

AR7 AR7
Answer

JSX is just sugar that gets transpiled to a bunch of function calls of React.createElement, which you can find the docs for here: https://facebook.github.io/react/docs/top-level-api.html#react.createelement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

Basically your JSX goes from

<div style="color: white;">
  <div></div>
</div>

to

React.createElement('div', { style: { color: 'white' } }, [
  React.createElement('div', {}, [])
])

For the same reason you can't pass a loop to a parameter in a function, you can't put a loop into JSX.

React is like hyperscript in this way because it's a virtual dom library. A map call returns an array, which is the third parameter of React.createElement.

A for loop as a param is just broken syntax like

console.log(for (;;) console.log('hi'))

would be.